HTML5-indexedDB使用总结

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时使用传入对象的某个字段，也可以让数据库自己生成。

具体使用如下：

//使用传入对象的某个字段作为keyvar objectStore = db.createObjectStore("storeName", { keyPath: "proOfObj" });//使用具体某个字段作为keyvar objectStore = transaction.objectStore("storeName");//自动生成keyvar 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