浏览器数据库的使用

IndexedDB 是一种可以让你在用户的浏览器内持久化存储数据的方法。特点如下：

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

indexedDB

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


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();
    }
}