IndexedDB是在浏览器中保存结构化数据的一种数据库，为了替换WebSQL（标准已废弃，但被广泛支持）而出现。IndexedDB使用NoSQL的形式来操作数据库，保存和读取是JavaScript对象，同时还支持查询及搜索。

下面由5个方面讲述：

1. 数据库初始化

2. 对象存储空间（ObjectStore）

3. 事务

4. 游标查询

5. 索引

数据库初始化

IndexedDB保存的是对象，而不是使用表保存数据。打开数据库使用indexDB.open方法，这方法有两个参数，第一个是数据库名称，第二个是数据版本号。

PS：IndexedDB的操作完全是异步进行的，每一次IndexedDB操作，都需要注册onerror或onsuccess事件处理程序。

var DB_NAME = 'DEMO'; db; function initDb() { console.debug("initDb ..."); var req = indexedDB.open(DB_NAME, DB_VERSION); req.onsuccess = function (evt) { db = evt.target.result; console.debug("initDb opened"); }; req.onerror = function (evt) { console.error("initDb error:", evt.target.errorCode || evt.target.error); }; //增加数据库版本号时,会触发onupgradeneeded事件(会在onsuccess之前被调用) req.onupgradeneeded = function (evt) { console.debug("initDb.onupgradeneeded"); }; }

PS：这里要注意的是，数据库版本只会有最新一个，不会同时存在两个版本的同名数据库。

对象存储空间（ObjectStore）

对象存储空间（ObjectStore）可以想象成关系数据库的表，在初始化DB触发onupgradeneeded时，创建ObjectStore。使用createObjectStore方法，第一个参数是对象名，第二个参数是对象属性，一般是设置keyPath（作为键使用）。

req.onupgradeneeded = function (evt) { console.debug("initDb.onupgradeneeded"); var db = evt.currentTarget.result; usersStore = db.createObjectStore("users", { keyPath : "id" }); };

效果如下：

事务

所有读取或修改数据的操作，都要通过事务来完成。创建事务使用transaction方法，第一个参数是需要访问的ObjectStore，第二个参数是访问模式（readwrite、readonly，默认是只读）。

添加数据

function addData(){ var users = [{ id : '001', name : '刘亦菲', age : 18 },{ id : '002', name : '杨幂', age : 19 }]; var tx = db.transaction("users", READ_WRITE); var store = tx.objectStore("users"); var i = 0, len = users.length; while(i < len){ store.add(users[i++]); } }

获取数据

function getData(){ var tx = db.transaction("users"); var store = tx.objectStore("users"); var req = store.get("001"); req.onsuccess = function (evt) { var res = evt.target.result; console.debug(res); }; req.onerror = function (evt) { console.error("getData error:", evt.target.errorCode || evt.target.error); }; }

修改数据

function updateData(){ var tx = db.transaction("users", READ_WRITE); var store = tx.objectStore("users"); var req = store.put({ id : '001', name : '刘亦菲-小龙女', age : 18 }); req.onsuccess = function (evt) { console.debug("updateData success"); }; req.onerror = function (evt) { console.error("updateData error:", evt.target.errorCode || evt.target.error); }; }

删除数据

function delData(){ var tx = db.transaction("users", READ_WRITE); var store = tx.objectStore("users"); var req = store.delete("001"); req.onsuccess = function (evt) { console.debug("delData success"); }; req.onerror = function (evt) { console.error("delData error:", evt.target.errorCode || evt.target.error); }; } 

清空数据

function clearData(){ var tx = db.transaction("users", READ_WRITE); var store = tx.objectStore("users"); var req = store.clear(); req.onsuccess = function (evt) { console.debug("clearData success"); }; req.onerror = function (evt) { console.error("clearData error:", evt.target.errorCode || evt.target.error); }; }

游标查询

使用事务可以直接通过键检索单个对象，而需要检索多个对象时候就需要使用游标。游标是指向结果集的指针，不提前收集结果。游标指针会先指向结果中的第一项，在接到查找下一项指令时，才会指向下一项。