IndexedDB

最后更新于:2022-04-01 23:54:27

## 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属性没有唯一值。
';