参考：《JavaScript 高级程序设计》（第3版）

Indexed Database API，简称为 IndexedDB，是在浏览器中保存结构化数据的一种数据库，支持保存、读取、查询、搜索等。

替代了已被废弃的 Web SQL Database API。

================ 使用步骤 ================

1. 建立与数据库的连接

indexedDB 是一个数据库，使用对象保存数据（不是用表来保存）。一个 indexedDB 数据库，就是一组位于相同命名空间下的对象的集合。

• 使用 window.indexedDB.open(dbName, version) 打开数据库。
• 使用 db.close() 关闭数据库、断开数据库连接。db代表数据库实例对象。
• 使用 window.indexedDB.deleteDatabase(dbName) 删除数据库。(只有在数据库断开连接的情况下才能删除)

// 打开名为 JackDB 的数据库
let request = indexedDB.open("JackDB", 1);/*** onupgradeneeded 当创建一个新的数据库或者增加已存在的数据库的版本号,onupgradeneeded 事件会被触发* onupgradeneeded 是唯一可以修改数据库结构的地方*/
request.onupgradeneeded = function (event) {// todo something
};
request.onsuccess = function (event) {// event.target 是 IDBRequest 实例，指向request对象// event.target.result 指向数据库实例对象// todo something
};
request.onerror = function (event) {console.log("数据库打开失败：", event.target.errorCode);
};

2. 创建对象存储空间

因仅能在 onupgradeneeded 事件修改数据库结构，所以仅能在此事件里创建存储空间。

创建对象存储空间时，需要指定一个唯一的键。

• 可以通过 keyPath 指定主键，
• 可以通过 autoIncrement: true 设置自增键

request.onupgradeneeded = function (event) {// event.target 是 IDBRequest 实例，指向 request 对象db = event.target.result; // event.target.result 是数据库实例对象let store;if (!db.objectStoreNames.contains("users")) {// 创建名为 users 的存储空间// store = db.createObjectStore("users", { autoIncrement: true }); // autoIncrement 自增主键store = db.createObjectStore("users", { keyPath: "name" }); // keyPath 主键字段名}
};

3. 数据的基本CRUD

3.1 新增数据

/*** 写入数据* @param {IDBDatabase} db 数据库实例* @param {String | Array} dbName 数据库名* @param {String} storeName objectStore名* @param {*} data 待新增的数据*/
function add(db, dbName, storeName, data) {let request = db.transaction(dbName, "readwrite") // 新建事务.objectStore(storeName) // 拿到 IDBObjectStore 对象.add(data);request.onsuccess = (event) => {console.log('写入数据成功',event.target.result)};request.onerror = (event) => {console.log('写入数据失败', event.target.error);};request.onabort = (event) => {console.log('事务回滚', event.target);};
}

3.2 修改数据

/*** 根据主键修改数据（若无此主键，则新增数据）* @param {IDBDatabase} db 数据库实例* @param {String | Array} dbName 数据库名* @param {String} storeName objectStore名* @param {*} key 主键*/
function update(db, dbName, storeName, data) {let request = db.transaction(dbName, "readwrite") // 新建事务.objectStore(storeName) // 拿到 IDBObjectStore 对象.put(data);request.onsuccess = (event) => {console.log('修改数据成功',event.target.result)};request.onerror = (event) => {console.log('修改数据失败', event.target.error);};request.onabort = (event) => {console.log('事务回滚', event.target);};
}

3.3 查询数据

/*** 根据主键读取数据* @param {IDBDatabase} db 数据库实例* @param {String | Array} dbName 数据库名* @param {String} storeName objectStore名* @param {*} key 主键*/
function read(db, dbName, storeName, key) {let request = db.transaction(dbName, "readwrite") // 新建事务.objectStore(storeName) // 拿到 IDBObjectStore 对象.get(key);request.onsuccess = (event) => {console.log('读取数据成功',event.target.result)};request.onerror = (event) => {console.log('读取数据失败', event.target.error);};request.onabort = (event) => {console.log('事务回滚', event.target);};
}

3.4 删除数据

/*** 根据主键删除数据* @param {IDBDatabase} db 数据库实例* @param {String | Array} dbName 数据库名* @param {String} storeName objectStore名* @param {*} key 主键*/function remove(db, dbName, storeName, key) {let request = db.transaction(dbName, "readwrite") // 新建事务.objectStore(storeName) // 拿到 IDBObjectStore 对象.delete(key);request.onsuccess = (event) => {console.log("删除数据成功", event.target.result);};request.onerror = (event) => {console.log("删除数据失败", event.target.error);};request.onabort = (event) => {console.log("事务回滚", event.target);};
}

3.5 清空数据

/*** 清空所有数据* @param {IDBDatabase} db 数据库实例* @param {String | Array} dbName 数据库名* @param {String} storeName objectStore名*/function read(db, dbName, storeName) {let request = db.transaction(dbName, "readwrite") // 新建事务.objectStore(storeName) // 拿到 IDBObjectStore 对象.clear();request.onsuccess = (event) => {console.log("清空数据成功", event.target.result);};request.onerror = (event) => {console.log("清空数据失败", event.target.error);};request.onabort = (event) => {console.log("事务回滚", event.target);};
}

4. 游标

/*** cursor 游标* @desc 指向结果集的指针* 游标工作原理：游标指针先指向结果中的第一项，在接到查找下一项的命令时，才会指向下一项。（不提前收集结果）* 创建游标：在存储空间上调用openCursor(range, direction)* @param {IDBKeyRound} range 键范围，默认范围为全部* @param {String} direction 方向*   next 下一个（默认）*   nextunique 下一个不重复项*   prev 前一项*   prevunique 前一个不重复项* @return 会返回一个请求对象，可以指定onsuccess()/onerror()事件处理程序。*   onsuccess()可以通过event.target.result取得结果中的下一项。*     有下一项时：event.target.result 是 IDBCursorWithValue的实例*     无下一项时：event.target.result 是 null* 游标查找下一项指令：continue(key), advance(count)*   continue(key) 移动到结果集中的下一项。参数key（主键）可选。*     不指定key,游标移动到下一项；*     指定key，游标移动到指定键。*   advance(count) 向前移动count指定项数。*/

 游标的使用示例，放在最后辣 ~

5. 键范围 

/*** keyRange 键范围* @desc 利用游标查找数据太局限，键范围可灵活的查找数据（实例：IDBKeyRange）* @兼容 var IDBKeyRange = window.IDBKeyRange || window.webkitIDBKeyRange || window.msIDBKeyRange;* @func 四种定义键的方式，最后一种功能包含前三种*   1. only(key) // 只取得键为key的对象，类似于objectStore().get(key)*   2. lowerBound(startKey, isStartNext) // 指定游标开始的位置，默认isStartNext为false*        isStartNext = false  =>  从startKey开始一直查找到最后*        isStartNext = true  =>  从startKey的下一个对象开始一直查找到最后*   3. upperBound(endKey, isEndNext) // 指定游标结束的位置，默认isEndNext=false*        isEndNext = false  => 从头查找到endKey的位置*        isEndNext = true  =>  从头查找到endKey的前一个对象为止*   4. bound(startKey, endKey, isStartNext, isEndNext) // 指定游标开始和结束的位置，默认isStartNext=false, isEndNext=false*        isStartNext = false  => 从startKey开始查找*        isStartNext = true  => 从startKey的下一个对象开始查找*        isEndNext = false  => 到endKey结束*        isEndNext = true  => 到endKey的上一个对象结束*/

  键范围的使用示例，放在最后辣 ~

6. 索引

/*** 索引* @desc 类似对象存储空间。（为一个存储对象空间，指定多个键）* @意义 为提高查询速度而基于特定属性创建的。* 例如：通过用户id和用户名两种方式存储数据，就需要通过这两个键来存储记录。用户id作为主键，在为用户名创建索引。** @func 创建索引 creatIndex(indexName, indexAttrName, options)* @param indexName 索引名* @param indexAttrName 索引属性名* @param options 包含unique的配置项* @return 返回IDBIndex实例** @func 获取某个索引 index(indexName)* @param indexName 索引名* 在索引上，调用 openCursor() 来创建游标。*   此时，event.target.result.key 存储的是索引键；*        event.target.result.primaryKey 存储的是主键；*        event.target.result.value 存储的是整个对象。* 在索引上，调用 openKeyCursor() 来创建一个特殊的，只返回每条记录主键的游标。*   此时，event.target.result.key 存储的是索引键;*        event.target.result.primaryKey 存储的是主键；*        无 event.target.result.value。* 在索引上，调用 get(indexKey) 来获取整个对象。*   此时，event.target.result 即是这个对象。* 在索引上，调用 getKey(indexKey) 来通过索引键获取主键。*   此时，event.target.result 即是这个主键。** @func 获取某个存储空间下的所有索引 indexNames属性* @return 返回 DOMStringList 实例，即包含某个存储空间下所有索引名的对象** @func 删除某个索引 deleteIndex(indexName)* @return 无任何返回，因为删除索引不影响存储空间，所以无任何返回。*/

 索引的使用示例，放在最后辣 ~

7. 并发问题

/*** 并发问题* @desc IndexedDB提供的API是异步的，但是仍然存储并发问题。* @eg 例如：浏览器两个不同的标签打开同一页面，那么一个页面试图更新另一个页面尚未准备就绪的数据库，有可能引起并发问题* @eg 例如：把数据库设置为新版，也有可能引发并发问题（只有当浏览器仅有一个标签页打开使用数据库时，调用setVersion()才能完成）*     解决法一：每次成功打开数据库，都指定onversionchange事件处理程序。*             当同一个来源的另一个内标签页调用setVersion()时，会执行这个函数，在函数内部立即关掉数据库即可。*             关闭数据路方法：db.close()*     解决法二：调用setVersion()时，指定请求的onblocked()事件处理程序。*             当你想要更新数据库版本但另一个标签页已经打开数据库的情况下，就会触发这个事件。*             此时可通知用户关闭其他标签页，再重新调用setVersion()。*/

8. 限制

/*** 限制* @desc 与Web Storage类似。* @限制1 IndexedDB只能由同源页面操作，不能跨域共享信息。* @限制2 每个数据库占用磁盘空间有限。*         FireFox 4+ 的上限是每个源 50M，其他几乎都是5M* @限制3 FireFox 不允许本地文件访问IndexedDB，Chrome无限制。*/

9. 封装操作数据库的工具类

/*** IndexedDB数据库操作方法类*/
class IDBUtils {constructor(db, dbName, store) {this.db = db; // {IDBDatabase} 已被打开的数据库this.dbName = dbName; // {String | Array} 存储空间名this.store = store; // {String} 存储空间名this.type = {success: "SUCCESS", // 操作成功error: "ERROR", // 操作失败done: "DONE", // 检索结束abort: "ABORT", // 操作回滚};}/*** 新增数据* @param {*} data 要写入的数据* @param {Function} cb 回调函数*/add(data, cb) {let request = this.db.transaction(this.dbName, "readwrite") // 新建事务.objectStore(this.store) // 拿到 IDBObjectStore 对象.add(data);request.onsuccess = (event) => {if (cb) cb(this.type.success, event.target.result);};request.onerror = (event) => {if (cb) cb(this.type.error, event.target.error);};request.onabort = (event) => {if (cb) cb(this.type.abort, event.target);};}/*** 根据主键，读取数据* @param {String | Number} key 主键* @param {Function} cb 回调函数*/read(key, cb) {let request = this.db.transaction(this.dbName, "readonly") // 新建事务.objectStore(this.store).get(key);request.onsuccess = (event) => {if (cb) cb(this.type.success, event.target.result);};request.onerror = (event) => {if (cb) cb(this.type.error, event.target.error);};request.onabort = (event) => {if (cb) cb(this.type.abort, event.target);};}/*** 根据主键要么更新，要么插入* @param {*} param 一条完整的信息* @param {Function} cb 回调函数*/update(param, cb) {let request = this.db.transaction(this.dbName, "readwrite").objectStore(this.store).put(param);request.onsuccess = (event) => {if (cb) cb(this.type.success, event.target.result);};request.onerror = (event) => {if (cb) cb(this.type.error, event.target.error);};request.onabort = (event) => {if (cb) cb(this.type.abort, event.target);};}/*** 删除数据* @param {key} key 主键* @param {Function} cb 回调函数*/remove(key, cb) {let request = this.db.transaction(this.dbName, "readwrite").objectStore(this.store).delete(key);request.onsuccess = () => {if (cb) cb(this.type.success);};request.onerror = () => {if (cb) cb(this.type.error);};request.onabort = (event) => {if (cb) cb(this.type.abort, event.target);};}/*** 清空数据* @param {Function} cb 回调函数*/clear(cb) {let request = this.db.transaction(this.dbName, "readwrite").objectStore(this.store).clear();request.onsuccess = () => {if (cb) cb(this.type.success);};request.onerror = (event) => {if (cb) cb(this.type.error, event.target);};request.onabort = (event) => {if (cb) cb(this.type.abort, event.target);};}/*** 关闭数据库*/closeDB() {this.db.close();}/*** 删除数据库* @条件 在数据库没被打开的情况下，可以删除*/deleteDB() {this.db.close();let request = window.indexedDB.deleteDatabase(this.dbName);request.onsuccess = (event) => {console.log("success", event);};request.onerror = (event) => {console.log("error", event);};}// =================================================================// ============================== 游标 ==============================// =================================================================/*** 读取全部（游标）* @param {Function} cb 回调函数*/readAll(direction, cb) {let request = this.db.transaction(this.dbName).objectStore(this.store).openCursor(null, direction);let res = [];request.onsuccess = (event) => {let cursor = event.target.result; // 也可以在索引上打开 objectStore.index("id").openCursor()// cursor 有值，代表有下一项; cursor = null，代表没有下一项if (cursor) {res.push({ key: cursor.key, value: cursor.value });cursor.continue(); // 继续查找下一项} else {if (cb) cb(this.type.success, res);}};request.onerror = (event) => {if (cb) cb(this.type.error, event.target);};}/*** 利用游标更新 cursor.update()* @param {*} key 主键* @param {*} data 待更新数据* @param {Function} cb 回调函数*/cursorUpdate(key, data, cb) {let request = this.db.transaction(this.dbName).objectStore(this.store).openCursor();request.onsuccess = (event) => {let cursor = event.target.result;if (cursor) {if (cursor.key === key) {let updateRequest = cursor.update(data);updateRequest.onsuccess = (event) => {if (cb) cb(this.type.success, event.target);};updateRequest.onerror = (event) => {if (cb) cb(this.type.error, event.target);};} else {cursor.continue(); // 继续查找下一项}} else {if (cb) cb(this.type.done); // 检索结束}};request.onerror = (event) => {if (cb) cb(this.type.error, event.target);};}/*** 利用游标删除 cursor.delete()* @param {*} key 主键* @param {Function} cb 回调函数*/cursorDelete(key, cb) {let request = this.db.transaction(this.dbName).objectStore(this.store).openCursor();request.onsuccess = (event) => {let cursor = event.target.result;if (cursor) {if (cursor.key === key) {let deleteRequest = cursor.delete();deleteRequest.onsuccess = () => {if (cb) cb(this.type.success);};deleteRequest.onerror = (event) => {if (cb) cb(this.type.error, event.target);};} else {cursor.continue(); // 继续查找下一项}} else {if (cb) cb(this.type.done); // 检索结束}};request.onerror = (event) => {if (cb) cb(this.type.error, event.target);};}// ==================================================================// ============================== 键范围 =============================// ==================================================================IDBKeyRange = window.IDBKeyRange || window.webkitIDBKeyRange;searchOnly(key, cb) {let range = IDBKeyRange.only(key);let request = this.db.transaction(this.dbName).objectStore(this.store).openCursor(range);request.onsuccess = (event) => {let cursor = event.target.result;if (cursor) {if (cb) cb({ key: cursor.key, value: cursor.value });} else {if (cb) cb(this.type.done);}};request.onerror = (event) => {if (cb) cb(this.type.error, event.target.error);};}searchLowerBound(key, isNext = false, cb) {let range = IDBKeyRange.lowerBound(key, isNext);let request = this.db.transaction(this.dbName).objectStore(this.store).openCursor(range, "prev");let res = [];request.onsuccess = (event) => {let cursor = event.target.result;if (cursor) {res.push({ key: cursor.key, value: cursor.value });cursor.continue(); // 继续查找下一项} else {if (cb) cb(this.type.success, res);}};request.onerror = (event) => {if (cb) cb(this.type.error, event.target.error);};}searchUpperBound(key, isPre = false, cb) {let range = IDBKeyRange.upperBound(key, isPre);let request = this.db.transaction(this.dbName).objectStore(this.store).openCursor(range);let res = [];request.onsuccess = (event) => {let cursor = event.target.result;if (cursor) {res.push({ key: cursor.key, value: cursor.value });cursor.continue(); // 继续查找下一项} else {if (cb) cb(this.type.success, res);}};request.onerror = (event) => {if (cb) cb(this.type.error, event.target.error);};}searchBound(startKey, endKey, isNext = false, isPre = false, cb) {let range = IDBKeyRange.bound(startKey, endKey, isNext, isPre);let request = this.db.transaction(this.dbName).objectStore(this.store).openCursor(range);let res = [];request.onsuccess = (event) => {let cursor = event.target.result;if (cursor) {res.push({ key: cursor.key, value: cursor.value });cursor.continue(); // 继续查找下一项} else {if (cb) cb(this.type.success, res);}};request.onerror = (event) => {if (cb) cb(this.type.error, event.target.error);};}// =================================================================// ============================== 索引 ==============================// =================================================================/*** 获取存储空间对象上的索引*/getIndexNames() {let indexNameList = this.db.transaction(this.dbName, "readwrite") // 新建事务.objectStore(this.store).indexNames; // 拿到 IDBObjectStore 对象console.log("indexNameList", indexNameList);}/*** 通过索引键使用游标* @param {*} indexName */getIndexCursor(indexName) {let index = this.db.transaction(this.dbName, "readwrite") // 新建事务.objectStore(this.store) // 拿到 IDBObjectStore 对象.index(indexName);let request = index.openCursor();request.onsuccess = (event) => {console.log("event", event.target.result);// 进行游标的使用、continue等逻辑};}/*** 通过索引键获取主键游标* @param {*} indexName */getIndexKeyCursor(indexName) {let index = this.db.transaction(this.dbName, "readwrite") // 新建事务.objectStore(this.store) // 拿到 IDBObjectStore 对象.index(indexName);let request = index.openKeyCursor();request.onsuccess = (event) => {console.log("event", event.target.result);// 进行游标的使用、continue等逻辑};}/*** 通过索引键获取数据* @param {*} indexName * @param {*} indexKey */formIndexGet(indexName, indexKey) {let index = this.db.transaction(this.dbName, "readwrite") // 新建事务.objectStore(this.store) // 拿到 IDBObjectStore 对象.index(indexName);let request = index.get(indexKey);request.onsuccess = (event) => {console.log("event", event.target.result);};}/*** 通过索引键获取主键* @param {*} indexName * @param {*} indexKey */fromIndexGetKey(indexName, indexKey) {let index = this.db.transaction(this.dbName, "readwrite") // 新建事务.objectStore(this.store) // 拿到 IDBObjectStore 对象.index(indexName);let request = index.getKey(indexKey);request.onsuccess = (event) => {console.log("event", event.target.result);};}
}

索引、游标、键范围的基本使用如上，当然还可以利用 索引+游标+键范围来查询数据，大家有需要可以自己封装