本地数据存储之 IndexedDB 基本封装

在HTML5本地存储——Web SQL Database提到过Web SQL Database实际上已经被废弃，而HTML5的支持的本地存储实际上变成了Local Storage和Session Storage与IndexedDB。Web Storage使用简单字符串键值对在本地存储数据，方便灵活，但是对于大量结构化数据存储力不从心，IndexedDB是为了能够在客户端存储大量的结构化数据，并且使用索引高效检索的API。

基于jquery封装：

/**
 * Created by hymn 2017/10/19.
 * cb-指callback回调
 */
;(function($, window, document,undefined) {
    //定义indexedDB的构造函数
    var DB = function(ele, opt) {
        this.$element = ele,
            this.defaults = { 
                name   : "my_db",
                version: 1,
                db     : null,
                tableName:''
            }
            },
            this.options = $.extend({}, this.defaults, opt)
    }
    //定义indexedDB的方法
    DB.prototype = {
        initDB:function(db,cb) {
            var options=this.options;
            options.version = options.version || 1;
            var request = window.indexedDB.open(options.name, options.version);
            request.onerror = function (e) {
                console.log(e.currentTarget.error.message);
            };
            request.onsuccess = function (e) {
                options.db = e.target.result;
                if(cb){
                 cb({
                        db:  db
                    })
                }
            };
            request.onupgradeneeded = function (e) {
                var thisDB = e.target.result;
                // options.db = thisDB;
                var tableName=options.tableName;
                if (!thisDB.objectStoreNames.contains(tableName)) {
                       var objStore = thisDB.createObjectStore(tableName, {keyPath: "img",autoIncrement:false});
                    objStore.createIndex("src", "src", {unique: false});

                }

            };
            this.options=options;
        },
        /**
        *新增表
        * configs 配置
        *
        /
        addTable(configs){
            //configs={
            //        tableKey: 'id',  //key
            //        newTableName: '',  //新表名
            //        autoIncrement: false, //自增
            //        unique: false,  //唯一
            //        tableIndex:['value'],  //字段名
            //    }
            var options=this.options;
            var request = window.indexedDB.open(options.name, options.version);
            request.onerror = function (e) {
                console.log(e.currentTarget.error.message);
            };
            request.onsuccess = function (e) {
                options.db = e.target.result;
            };
            request.onupgradeneeded = function (e) {
                var thisDB = e.target.result;
                // options.db = thisDB;
                var tableName=configs.newTableName;
                var autoIncrement=configs.autoIncrement;
                var Index=configs.tableIndex;
                var unique=configs.unique;
                var key=configs.tableKey;
                if(tableName)
                    if (!thisDB.objectStoreNames.contains(tableName)) {
                        var objStore = thisDB.createObjectStore(tableName, {keyPath: key,autoIncrement:autoIncrement});
                        $.each(Index,function(i,v){
                            objStore.createIndex(v, v, {unique: unique});
                        })
                    }
            }
        },
        /**
        *关闭数据库
        * tableName 表名
        *  id  索引编号
        /
        closeDB() {
            var options=this.options;
            options.db.close();
        },
        /**
        * 删除表
        * tableName 表名
        *  id  索引编号
        /
        deleteDB() {
            var dbObj=this.options;
            window.indexedDB.deleteDatabase(dbObj.name);
        },
         /**
        * 新增数据
        * tableName 表名
        *  id  索引编号
        /
        addData( tableName, data, cb) {
            var dbObj=this.options;
            var transaction = dbObj.db.transaction(tableName, 'readwrite');
            transaction.oncomplete = function () {
                console.log("transaction complete");
            };
            transaction.onerror = function (event) {
                console.dir(event)
            };

            var objectStore = transaction.objectStore(tableName);
            var request = objectStore.add(data);
            request.onsuccess = function (e) {
                if (cb) {
                    cb({
                        error: 0,
                        data : data
                    })
                }
            };
            request.onerror = function (e) {
                if (cb) {
                    cb({
                        error: 1
                    })
                }
            }
        },

        /**
        * 删除表对应数据
        * tableName 表名
        *  id  索引编号
        /
        deleteData(tableName, id, cb) {
            var dbObj=this.options;
            var transaction = dbObj.db.transaction(tableName, 'readwrite');
            transaction.oncomplete = function () {
                console.log("transaction complete");
            };
            transaction.onerror = function (event) {
                console.dir(event)
            };
            var objectStore = transaction.objectStore(tableName);
            var request = objectStore.delete(parseInt(id));
            request.onsuccess = function (e) {
                if (cb) {
                    cb({
                        error: 0,
                        data : parseInt(id)
                    })
                }
            };
            request.onerror = function (e) {
                if (cb) {
                    cb({
                        error: 1
                    })
                }
            }
        },
         /**
        * 获取表所有数据
        * tableName 表名
        *  id  索引编号
        /
        getDataAll(tableName, cb) {
            var dbObj=this.options;
            var transaction = dbObj.db.transaction(tableName, 'readonly');
            transaction.oncomplete = function () {
                console.log("transaction complete");
            };
            transaction.onerror = function (event) {
                console.dir(event)
            };

            var objectStore = transaction.objectStore(tableName);
            var rowData = [];
            objectStore.openCursor(IDBKeyRange.lowerBound(0)).onsuccess = function (event) {
                var cursor = event.target.result;
                if (!cursor && cb) {
                    cb({
                        error: 0,
                        data : rowData
                    });
                    return;
                }
                // rowData.push(cursor.value);
                if(cursor){
                    rowData.push(cursor.value)
                    cursor.continue();
                }

            };
            console.log(rowData)
            return rowData;
        },
         /**
        * 获取表id获取数据
        * tableName 表名
        *  id  索引编号
        /
        getDataById(tableName, id, cb) {
            var dbObj=this.options;
            var transaction = dbObj.db.transaction(tableName, 'readwrite');
            transaction.oncomplete = function () {
                console.log("transaction complete");
            };
            transaction.onerror = function (event) {
                console.dir(event)
            };

            var objectStore = transaction.objectStore(tableName);
            var request = objectStore.get(id);
            request.onsuccess = function (e) {
                if (cb) {
                    cb({
                        error: 0,
                        data : e.target.result
                    })
                }
            };
            request.onerror = function (e) {
                if (cb) {
                    cb({
                        error: 1
                    })
                }
            }
        }
    }
    //在插件中使用indexedDb对象
    $.fn.myPlugin = function(options,cb) {
        //创建indexedDb的实体
        var indexedDb= new DB(this, options);
        indexedDb.initDB(indexedDb,cb);
        //调用其方法
        return indexedDb;
    }
})(jQuery, window, document);

//初始化
var myDb={ 
           name: "pic_db",       
           version: 1,
           db: null,
           tableName:''
         }
$.fn.myPlugin (myDb,callback)

具体indexedDb详解请看相关文档。