1. 特点

IndexedDB 是一种可以让你在用户的浏览器内持久化存储数据的方法。特点如下： * 支持事务、游标、索引等数据库操作 * 一般浏览器会分配50M-250M不等的内存 * 持久化存储，清除浏览器缓存不会被删除（localStorage是会被删除的） * 支持多种数据格式：arrayBuffer、String、Object、Array、File、Blob、ImageData都ok * 不支持跨域，一个域可以有多个数据库 * 开发中需要谨记的一个特性：异步操作，换句话说，所有操作都需要在回调函数中完成

2. 兼容性

前端在学一项技术时候，往往先关注它的兼容性，再牛的技术，不兼容也是用不到项目中的。

这是can i use中指示的情况，我实测的结果是： * PC端chrome 54上有特殊表现（在第一次打开indexedDB时，upgradeneeded事件不触发），firfox表现正常 * 移动端ios8-ios10 safari支持，但是X5内核不支持；android上X5内核支持

3. 使用

基本使用模式如下： 1. 打开数据库 2. 建立一个事务 3. 在事务请求的回调函数中处理事务处理的结果 4. 使用完毕关闭数据库

3.1 基本概念

数据库

一个数据库由数据库名和其版本两个属性

事务

事务用于操纵数据库中数据，每个事务有不同的模式：readonly、readwrite或者versionchange。简单说下versionchange，在这个事务中，可以读取、更新、删除已经存在的数据，也可以删除和新建对象存储空间（object stores）和索引。该类型事务不能手动创建，但是在upgradeneeded事件被触发时会自动创建。

对象存储空间

object store，我理解类似数据库的表。一个数据库会有多个对象存储空间，对象存储空间中存储着数据。

key

每条数据有一个key，这个key可以是每次存储时用户自己具体决定某个值，可以是用户在新建object store时使用传入对象的某个字段，也可以让数据库自己生成。 具体使用如下：

//使用传入对象的某个字段作为key var objectStore = db.createObjectStore("storeName", { keyPath: "proOfObj" }); //使用具体某个字段作为key var objectStore = transaction.objectStore("storeName"); //自动生成key var objectStore = db.createObjectStore("storeName", {autoIncrement: true});

upgradeneeded事件

就是版本号变更触发的事件。注意，版本号只能增加，不能减少。新建object store的工作必须在这个事件的回调里写，至少我测试是必须，如果在打开数据库的success事件中写，会报错。多么神奇。

3.2 实例代码

我对你使用indexedDB的提醒就是，记住异步操纵。

class IndexedDB{ constructor(dbName, storeName, version){ this.storeName = storeName; const indexedDB = window.indexedDB || window.webkitIndexedDB || window.mozIndexedDB; const request = indexedDB.open(dbName, version); request.onsuccess = e => { this.db = e.target.result; console.log('Init indexedDB successfully'); }; request.onupgradeneeded = e => { this.db = e.target.result; if(!this.db.objectStoreNames.contains(storeName)){ this.store = this.db.createObjectStore(storeName); } console.log('DB version changed, db version: ', this.db.version); }; request.onerror = e => {console.info('Can not open indexedDB', e);}; } get(key, callback){ const transaction = this.db.transaction(this.storeName); const objectStore = transaction.objectStore(this.storeName); const request = objectStore.get(key); request.onerror = e => {console.info('Can not get value', e);}; request.onsuccess = e => {callback(e.target.result);}; } set(value, key){ let oldValue; this.get(key, function(res){oldValue = res;}); if(oldValue){ console.info('You should use function update'); }else{ const transaction = this.db.transaction(this.storeName, 'readwrite'); const objectStore = transaction.objectStore(this.storeName); const request = objectStore.add(value, key); request.onerror = e => {console.info('Can not add value', e);}; } } update(newValue, key){ const oldValue = this.get(key); if(!oldValue){ console.info('You should use function set'); }else{ const transaction = this.db.transaction(this.storeName, 'readwrite'); const objectStore = transaction.objectStore(this.storeName); const request = objectStore.put(newValue, key); request.onerror = e => {console.info('Can not update value', e);}; } } remove(key){ const request = this.db.transaction(this.storeName, 'readwrite') .objectStore(this.storeName) .delete(key); request.onerror = e => {console.info('Can not remove value', e);}; } close(){ this.db.close(); } }

我这里对indexedDB的操作做了一个封装，对get方法异步处理的方式是传入一个回调，其实也可以使用thunk或者返回一个promise，大家可以自己试试。

参考连接： https://w3c.github.io/IndexedDB/ https://www.w3.org/TR/IndexedDB/ https://developer.mozilla.org/zh-CN/docs/Web/API/IndexedDB_API/Using_IndexedDB