牛骨文教育服务平台(让学习变的简单)

IndexedDB

4、客户端数据库(IndexedDB)

IndexedDB(对象数据库)可以说是浏览器端数据库,可以被网页脚本程序创建和操作。它允许储存大量数据,提供查找接口,还能建立索引。

在IndexedDB API中,一个数据库就是一个命名对象仓库(object store)的集合,对象存储区存储的是对象。

IndexedDB特点:

  • 键值对存储:在对象仓库中,数据以“键值对”的形式保存,每一个数据都有对应的键名,键名是独一无二的,不能有重复,否则会抛出一个错误。
  • 同域限制:IndexedDB数据库的作用域是限制在包含它们的文档源中,每一个数据库对应创建该数据库的域名,两个同源的Web页面互相之间可以访问对方的数据,但非同源的页面就不行。
  • 支持事务:IndexedDB支持事务,这就是说对数据库的查询和更新都是包含在一个事务(transaction)中,以此来确保这些操作要么是一起成功,要么是一起失败,并且永远不会让数据库出现更新到一半的情况。
  • 异步:IndexedDB的操作不会阻塞浏览器的UI主线程。
  • 储存空间大:IE的储存上限是250MB,Chrome和Opera是剩余空间的某个百分比,Firefox则没有上限。

(1)检测浏览器是否支持IndexedDB API

if("indexedDB" in window){
  //支持
}else{
  //不支持
}

(2)访问数据库

要异步访问数据库,就要调用 window 对象 indexedDB 属性的 open() 方法

var request = indexedDB.open(name[,version])

indexedDB.open方法可传输人两个参数:name是数据库名称,必填;version是数据库版本,是一个大于0的正整数(0将报错)。

open方法返回一个 IDBRequest 对象 (IDBOpenDBRequest),

注意:如果数据库存在,将打开数据库,否则,则会新建该数据库。如果省略第二个参数,则会自动创建版本为1的该数据库。

当打开数据时,有可能触发4种事件:
success:打开成功。
error:打开失败。
upgradeneeded:第一次打开该数据库,或者数据库版本发生变化。
blocked:上一次的数据库连接还未关闭。
第一次打开数据库时,会先触发upgradeneeded事件,然后触发success事件。

request.onupgradeneeded = function(e){}

request.onsuccess = function(e){
  db = e.target.result;
}

回调函数接受一个事件对象event作为参数,它的target.result属性就指向打开的IndexedDB数据库。

(3)IndexedDB实例对象的方法

3.1 createObjectStore()方法

createObjectStore()方法用于创建存放数据的“对象仓库”(object store)。

db.createObjectStore(name[,options]);

参数说明:
参数name是对象仓库的名字;options是可选参数,用来设置对象仓库的属性,可配置两个属性:keyPath和autoIncrement,分别表示每条记录的键名和是否使用自动递增的整数作为键名,默认为false。

db.createObjectStore("db1", {keyPath: "user"});
db.createObjectStore("db2", {autoIncrement: true});

由于对象仓库的名字具有唯一性(当创建已存在的数据库时,会报错),所以在创建对象仓库时,我们有必要检测对象仓库是否已存在:
db.objectStoreNames.contains(name)
objectStoreNames属性返回一个DOMStringList对象,里面包含了当前数据库所有“对象仓库”的名称。可以使用DOMStringList对象的contains方法,检查数据库是否包含某个“对象仓库”。

3.2 transaction方法
创建了数据库,当然要使用它,不过数据库的更新、读取和删除是建立在事务的基础上的,所以我们首先要创建一个事务:

var t = db.transaction(array,type)

transcation()方法接受两个参数:参数array是一个数组,包含了所要使用的对象仓库,通常是一个;参数type是一个表示操作类型的字符串,目前只有两种类型:readonly(只读)和readwrite(读写)。

t = db.transaction(["db1","readwrite");

transaction()方法返回一个事务对象,该对象的objectStore()方法用于获取指定的对象仓库:

var store = t.objectStore("db1");

事务对象有三个监听事件:
abort:事务中断。
complete:事务完成。
error:事务出错。
假如事务完成时:

t.oncomplete =function(e){}

3.2.1 数据操作

下面的方法都是在事件对象上。

(1)add()方法

add()方法用来添加数据

var add = store.add(data,key)

参数说明:参数data是所要添加的数据;参数key是这条数据对应的键名(key)。

add()方法是异步的,有success和error事件:

add.onsuccess = funciton(e){}
add.onerror = function(e){}

(2)get()方法

get()方法用来读取数据,它的参数是键名

store.get(key)

get方法也是异步的,也有success和error事件。

(3)put()方法

put()方法用来更新数据,与add()方法类似:

var update = store.put(data,key)

(4)delete()方法

delete()方法用来删除数据,它的参数是键名:

var delete = store.delete(key)

delete方法也是异步的,也有success和error事件。

(5)openCursor()方法

openCursor()方法用来遍历数据:

var cursor = store.openCursor()

openCursor方法也是异步的,也有success和error事件。

cursor.onsuccess = function(e){
  var res = e.target.result;
  console.log("key",res.key);
  console.log("data",res.value);
  res.continue()
}

e.target.result属性指向当前数据对象。当前数据对象的key和value分别返回键名和键值(即实际存入的数据)。continue方法将光标移到下一个数据对象,如果当前数据对象已经是最后一个数据了,则光标指向null。

openCursor方法还可以接受第二个参数,表示遍历方向,默认值为next,其他可能的值为prev、nextunique和prevunique。后两个值表示如果遇到重复值,会自动跳过。

3.3 createIndex()方法

createIndex()方法用来创建索引:

createIndex(index,name,options)

createIndex方法接受三个参数,第一个是索引名称,第二个是建立索引的属性名,第三个是参数对象,用来设置索引特性。unique表示索引所在的属性是否有唯一值.

3.3.1 index方法

index()方法用于从对象仓库返回指定的索引。

var index = store.index(index);
var data = index.get(name)

注意:get方法有可能取回多个数据对象,因为name属性没有唯一值。