HTML5之IndexedDB初识

HTML5 的一个重要特性是本地数据持久性，它使用户能够在线和离线访问 Web 应用程序。

此外，本地数据持久性使移动应用程序更灵敏，使用的带宽更少，而且能够在低带宽场景中更高效地工作。

HTML5 提供了一些本地数据持久性选项：

localstorage:它支持您使用一个简单的键值对来存储数据。

IndexedDB:支持您本地存储大量对象，并使用健壮的数据访问机制检索数据。

 

IndexedDB API 取代了 Web Storage API，后者在 HTML5 规范中已不推荐使用。

（但一些领先的浏览器仍然支持 Web Storage，其中包括苹果公司的 Safari 和 Opera Web 浏览器）与 Web Storage 相比，IndexedDB 具有多个优势，

其中包括索引、事务处理和健壮的查询功能。

 

使用IndexedDB：

一个数据库一次只能有一个版本。在首次创建数据库时，它的初始版本编号为 0。创建数据库之后，数据库（和它的对象存储）只能通过一种称为 versionchange 的特殊类型的事务来更改。要在创建数据库后更改它，必须打开具有更高版本的数据库。此操作会触发 upgradeneeded 事件。修改数据库或对象存储的代码必须位于 upgradeneeded 事件处理函数中。

简单使用例子:

 

// 兼容不同浏览器的indexedDB.
        window.indexedDB = window.indexedDB || window.webkitIndexedDB || window.mozIndexedDB || window.msIndexedDB;
        
        var database = {
            name: "TEST", // 数据库
            version: "1", // 数据库版本，默认值=1
            store: "TESTSTORE", // 对象存储(表)
        },
        html5rocks = html5rocks || {};

        html5rocks.indexedDB = {};
        html5rocks.indexedDB.db = null;

        // 创建数据库
        html5rocks.indexedDB.open = function () {
            // open方法不是立即打开数据库，而是一个请求并返回IDBRequest对象
            var request = indexedDB.open(database.name, database.version);

            // 数据库发生改变或第一次创建数据库时触发此事件。即:数据库版本发生更改时触发
            request.onupgradeneeded = function (e) {
                var db = e.target.result;
                if (!db.objectStoreNames.contains(database.store)) {
                    // 创建对象存储表 keyPath -主键名称
                    var objStore = db.createObjectStore(database.store, { keyPath: "id", autoIncrement: true });
                    // 创建索引 第一个参数:索引名称，第二个参数:索引列，unique - 唯一性
                    objStore.createIndex("id", "id", { unique: false });
                }
            };

            // 请求打开数据库发生错误时触发
            request.onerror = function (e) {
                console.log("Error to open db:" + database.name);
            };

            // 请求打开数据库成功时触发
            request.onsuccess = function (e) {
                html5rocks.indexedDB.db = e.target.result; // 将IDBRequest对象分配给 html5rocks.indexedDB.db
                console.log("Success to open db:" + database.name);
            };
        };

        // 删除数据库 db - string
        html5rocks.indexedDB.deleteDB = function (db) {
            indexedDB.deleteDatabase(db);
        };

        // insert数据 参数为-Object
        html5rocks.indexedDB.insert = function (objData) {
            // 读写 的事务
            var trans = html5rocks.indexedDB.db.transaction(database.store, "readwrite"),
                store = trans.objectStore(database.store);

            store.add(objData);

        };

        // updata数据 参数必须包含主键的对象
        html5rocks.indexedDB.updata = function (objData) {
            var trans = html5rocks.indexedDB.db.transaction(database.store, "readwrite"),
                store = trans.objectStore(database.store);

            store.put(objData);
        };

        // delete数据 参数为主键值
        html5rocks.indexedDB.delete = function (key) {
            var trans = html5rocks.indexedDB.db.transaction(database.store, "readwrite"),
                store = trans.objectStore(database.store);

            store.delete(key);
        };

        // 清除表(store)的所有记录
        html5rocks.indexedDB.clearObjectStore = function (store) {
            var objStore = store || database.store;
            var trans = html5rocks.indexedDB.db.transaction(objStore, "readwrite"),
                store = trans.objectStore(objStore);

            store.clear();
        };

        // 根据主键值获取记录，并返回对象  callback(arg) - 回调函数 参数接受返回的对象
        html5rocks.indexedDB.getDataByKey = function (key, callback) {
            // 只读事务
            var trans = html5rocks.indexedDB.db.transaction(database.store, "readonly"),
                store = trans.objectStore(database.store),
                request = store.get(key);
            request.onerror = function (e) {
                console.log("Error to get data by key:" + key);
            };
            request.onsuccess = function (e) {
                if (!!callback) {
                    Function.call(callback(e.target.result));
                }
            };
        };

        // 根据指定索引 查询获取相应的数据
        html5rocks.indexedDB.getDataByIndex = function (index, value, callback) {
            var trans = html5rocks.indexedDB.db.transaction(database.store),
               store = trans.objectStore(database.store),
               indexRequest = store.index(index),
               request = indexRequest.get(value);
            request.onerror = function (e) {
                console.log("Request error for index. ");
            };
            request.onsuccess = function (e) {
                if (!!callback) {
                    Function.call(callback(e.target.result));
                }
            };
        };

        // 根据游标获取所有数据 返回数组对象
        html5rocks.indexedDB.getDataListByCursor = function (callback) {
            var trans = html5rocks.indexedDB.db.transaction(database.store),
               store = trans.objectStore(database.store),
               request = store.openCursor(),
               lst = [];
            request.onerror = function (e) {
                console.log("Request error for cursor.");
            };
            request.onsuccess = function (e) {
                var cursor = e.target.result;

                if (cursor) {
                    lst.push(cursor.value);
                    cursor.continue();
                } else {
                    if (!!callback) {
                        Function.call(callback(lst));
                    }
                }
            };
        };