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