瀏覽器數據庫IndexedDB介紹

摘要

在移動端H5頁面開發的時候，為了更好的提高用戶體驗，可以對不常變化的數據做瀏覽器端數據緩存，在用戶打開頁面的時候，首先加載本地的數據，然后異步請求服務端，更新數據。在移動端webview中，可以使用IndexedDB的方式對數據進行存儲。當然如果數據量不大的情況下，localstorage也是一種選擇。

什么是IndexedDB

一般來說，數據庫分兩種類型：關系型和文檔型（也稱NoSQL或者對象）。關系型數據庫如SQL Server，MySQL，Oracle的數據存儲在表中。文檔數據庫如Mongodb,Redis,CouchDB將數據集作為個體對象存儲。IndexedDB是一個文檔數據庫，它在完全內置於瀏覽器中的一個沙盒環境中（強制依照（瀏覽器）同源策略）。如下圖所示，展示了數據庫的結構：

關於Indexeddb的增刪該查，可以使用這篇文字封裝的插件進行使用。

http://www.codemag.com/Article/1411041

index.db.js

//index.db.js
;

window.indexedDB = window.indexedDB ||
                   window.mozIndexedDB ||
                   window.webkitIndexedDB ||
                   window.msIndexedDB;

window.IDBTransaction = window.IDBTransaction ||
                   window.webkitIDBTransaction ||
                   window.msIDBTransaction;

window.IDBKeyRange = window.IDBKeyRange ||
                   window.webkitIDBKeyRange ||
                   window.msIDBKeyRange;

(function (window) {

    'use strict';

    var db = {

        version: 1, // important: only use whole numbers!

        objectStoreName: 'tasks',

        instance: {},

        upgrade: function (e) {

            var
                _db = e.target.result,
                names = _db.objectStoreNames,
                name = db.objectStoreName;

            if (!names.contains(name)) {

                _db.createObjectStore(
                    name,
                    {
                        keyPath: 'id',
                        autoIncrement: true
                    });
            }
        },

        errorHandler: function (error) {
            window.alert('error: ' + error.target.code);
            debugger;
        },

        open: function (callback) {

            var request = window.indexedDB.open(
                db.objectStoreName, db.version);

            request.onerror = db.errorHandler;

            request.onupgradeneeded = db.upgrade;

            request.onsuccess = function (e) {

                db.instance = request.result;

                db.instance.onerror =
                    db.errorHandler;

                callback();
            };
        },

        getObjectStore: function (mode) {

            var txn, store;

            mode = mode || 'readonly';

            txn = db.instance.transaction(
                [db.objectStoreName], mode);

            store = txn.objectStore(
                db.objectStoreName);

            return store;
        },

        save: function (data, callback) {

            db.open(function () {

                var store, request,
                    mode = 'readwrite';

                store = db.getObjectStore(mode),

                request = data.id ?
                    store.put(data) :
                    store.add(data);

                request.onsuccess = callback;
            });
        },

        getAll: function (callback) {

            db.open(function () {

                var
                    store = db.getObjectStore(),
                    cursor = store.openCursor(),
                    data = [];

                cursor.onsuccess = function (e) {

                    var result = e.target.result;

                    if (result &&
                        result !== null) {

                        data.push(result.value);
                        result.continue();

                    } else {

                        callback(data);
                    }
                };

            });
        },

        get: function (id, callback) {

            id = parseInt(id);

            db.open(function () {

                var
                    store = db.getObjectStore(),
                    request = store.get(id);

                request.onsuccess = function (e) {
                    callback(e.target.result);
                };
            });
        },

        'delete': function (id, callback) {

            id = parseInt(id);

            db.open(function () {

                var
                    mode = 'readwrite',
                    store, request;

                store = db.getObjectStore(mode);

                request = store.delete(id);

                request.onsuccess = callback;
            });
        },

        deleteAll: function (callback) {

            db.open(function () {

                var mode, store, request;

                mode = 'readwrite';
                store = db.getObjectStore(mode);
                request = store.clear();

                request.onsuccess = callback;
            });

        }
    };

    window.app = window.app || {};
    window.app.db = db;

}(window));

index.db.js使用

設置數據庫名稱

        //indexed db name
        app.db.objectStoreName = "mytestdb";

添加數據

        //add data
        app.db.save({ id: 2, name: "wolfy" }, function () {
            //回調函數
            console.log("添加成功");
        });

查詢數據

根據id查詢

        //查詢
        app.db.get(1, function (item) {
            console.log(item);
        });

查詢所有

        //query all
        app.db.getAll(function (items) {
            console.log(items);
        });

結果

刪除數據

刪除id為2的數據

        //delete 
        app.db.delete(2, function () {
            console.log('刪除成功');
        })

刪除所有

        app.db.deleteAll(function () {
            console.log("刪除成功");
        })

修改

        //add data
        app.db.save({ id: 2, name: "wolfy2" }, function () {
            //回調函數
            console.log("添加成功");
        });

總結

在優化移動端h5頁面的時候，對不經常變化的數據進行本地存儲，在訪問頁面的時候先加載本地的然后異步更新本地數據。

參考資料

http://web.jobbole.com/81793/

http://www.codemag.com/Article/1411041