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

具体使用如下：

//使用传入对象的某个字段作为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