前端存儲之indexedDB_ZenDei技術網路在線

在前一個階段的工作中，項目組要開發一個平臺，為了做出更好的用戶體驗，實現快速、高質量的交互，從而更快得到用戶的反饋，要求在前端把數據存儲起來，之後我去研究了下現在比較流行的前端存儲資料庫，找到了indexedDB，於是便對indexedDB做了一個較為深入的探索，此文就是記錄探索過程的一些心得體會。 ...

在前一個階段的工作中，項目組要開發一個平臺，為了做出更好的用戶體驗，實現快速、高質量的交互，從而更快得到用戶的反饋，要求在前端把數據存儲起來，之後我去研究了下現在比較流行的前端存儲資料庫，找到了indexedDB，於是便對indexedDB做了一個較為深入的探索，此文就是記錄探索過程的一些心得體會。

indexedDB為何物

在使用一個技術之前，先搞清楚它是什麼，這對你的理解很重要，從DB就可以看出，它肯定是一個資料庫，而說到資料庫，有兩種不同類型的資料庫，就是關係型資料庫和非關係型資料庫，關係型資料庫如Mysql、Oracle等將數據存儲在表中，而非關係型資料庫如Redis、MongoDB等將數據集作為個體對象存儲。indexedDB就是一個非關係型資料庫，它不需要你去寫一些特定的sql語句來對資料庫進行操作，因為它是nosql的，數據形式使用的是json，

indexedDB出現的意義

也許熟悉前端存儲的會說，不是有了LocalStorage和Cookies嗎？為什麼還要推出indexedDB呢？其實對於在瀏覽器里存儲數據，你可以使用cookies或local storage，但它們都是比較簡單的技術，而IndexedDB提供了類似資料庫風格的數據存儲和使用方式。

首先說說Cookies，英文直接翻譯過來就是小甜點，聽起來很好吃，實際上並不是，每次HTTP接受和發送都會傳遞Cookies數據，它會占用額外的流量。例如，如果你有一個10KB的Cookies數據，發送10次請求，那麼，總計就會有100KB的數據在網路上傳輸。Cookies只能是字元串。瀏覽器里存儲Cookies的空間有限，很多用戶禁止瀏覽器使用Cookies。所以，Cookies只能用來存儲小量的非關鍵的數據。

其次說說LocalStorage，LocalStorage是用key-value鍵值模式存儲數據，但跟IndexedDB不一樣的是，它的數據並不是按對象形式存儲。它存儲的數據都是字元串形式。如果你想讓LocalStorage存儲對象，你需要藉助JSON.stringify()能將對象變成字元串形式，再用JSON.parse()將字元串還原成對象。但如果要存儲大量的複雜的數據，這並不是一種很好的方案。畢竟，localstorage就是專門為小數量數據設計的，所以它的api設計為同步的。而IndexedDB很適合存儲大量數據，它的API是非同步調用的。IndexedDB使用索引存儲數據，各種資料庫操作放在事務中執行。IndexedDB甚至還支持簡單的數據類型。IndexedDB比localstorage強大得多，但它的API也相對複雜。對於簡單的數據，你應該繼續使用localstorage，但當你希望存儲大量數據時，IndexedDB會明顯的更適合，IndexedDB能提供你更為複雜的查詢數據的方式。

indexedDB的特性

1.對象倉庫

有了資料庫後我們自然希望創建一個表用來存儲數據，但indexedDB中沒有表的概念，而是objectStore，一個資料庫中可以包含多個objectStore，objectStore是一個靈活的數據結構，可以存放多種類型數據。也就是說一個objectStore相當於一張表，裡面存儲的每條數據和一個鍵相關聯。我們可以使用每條記錄中的某個指定欄位作為鍵值（keyPath），也可以使用自動生成的遞增數字作為鍵值（keyGenerator），也可以不指定。選擇鍵的類型不同，objectStore可以存儲的數據結構也有差異。

鍵類型	存儲數據
不使用	任意值，但是沒添加一條數據的時候需要指定鍵參數
keyPath	任意值，但是沒添加一條數據的時候需要指定鍵參數
keyGenerator	任意值
都使用	Javascript對象，如果對象中有keyPath指定的屬性則不生成新的鍵值，如果沒有自動生成遞增鍵值，填充keyPath指定屬性

如上圖，有一個用於保存person的object Store，這個倉庫的鍵就是person的ID值。

2. 事務性

在indexedDB中，每一個對資料庫操作是在一個事務的上下文中執行的。事務範圍一次影響一個或多個object stores，你通過傳入一個object store名字的數組到創建事務範圍的函數來定義。例如：db.transaction(storeName, 'readwrite')，創建事務的第二個參數是事務模式。當請求一個事務時,必須決定是按照只讀還是讀寫模式請求訪問。

3. 基於請求

對indexedDB資料庫的每次操作，描述為通過一個請求打開資料庫,訪問一個object store，再繼續。IndexedDB API天生是基於請求的,這也是API非同步本性指示。對於你在資料庫執行的每次操作,你必須首先為這個操作創建一個請求。當請求完成,你可以響應由請求結果產生的事件和錯誤。

4. 非同步

在IndexedDB大部分操作並不是我們常用的調用方法，返回結果的模式，而是請求—響應的模式，所謂非同步API是指並不是這條指令執行完畢，我們就可以使用request.result來獲取indexedDB對象了，就像使用ajax一樣，語句執行完並不代表已經獲取到了對象，所以我們一般在其回調函數中處理。

indexedDB怎麼玩

IndexedDB 鼓勵使用的基本模式如下所示：

打開資料庫並且開始一個事務。
創建一個 object store。
構建一個請求來執行一些資料庫操作，像增加或提取數據等。
通過監聽正確類型的 DOM 事件以等待操作完成。
在操作結果上進行一些操作（可以在 request 對象中找到）

接下來如果想要理解indexedDB具體怎麼玩，最好的方法就是創建一個簡單的web應用：把人的姓名、電話、地址存儲在IndexedDB里。IndexedDB里提供了簡單的增、刪、改、查介面，界面如下：

1.打開資料庫

a) 首先，你需要知道你的瀏覽器是否支持IndexedDB。

var indexedDB = window.indexedDB || window.webkitIndexedDB || window.mozIndexedDB || window.msIndexedDB;
if(!indexedDB)
{
    console.log("你的瀏覽器不支持IndexedDB");
}

b) 創建請求打開indexedDB：一旦你的瀏覽器支持IndexedDB，我們就可以打開它。你不能直接打開IndexedDB資料庫。IndexedDB需要你創建一個請求來打開它。

var request = indexedDB.open(name, version);

第一個參數是資料庫的名稱，第二個參數是資料庫的版本號。版本號可以在升級資料庫時用來調整資料庫結構和數據。但你增加資料庫版本號時，會觸發onupgradeneeded事件，這時可能會出現成功、失敗和阻止事件三種情況：

request.onerror = function(e) {
        console.log(e.currentTarget.error.message);
    };

    request.onsuccess = function(e) {
        myDB.db = e.target.result;
        console.log('成功打開DB');
    };

    request.onupgradeneeded = function(e) {
        var db = e.target.result;
        if (!db.objectStoreNames.contains('person')) {
            console.log("我需要創建一個新的存儲對象");
            //如果表格不存在，創建一個新的表格（keyPath，主鍵 ； autoIncrement,是否自增），會返回一個對象（objectStore）
            var objectStore = db.createObjectStore('person', {
                keyPath: "id",
                autoIncrement: true
            });

            //指定可以被索引的欄位，unique欄位是否唯一

            objectStore.createIndex("name", "name", {
                unique: false
            });

            objectStore.createIndex("phone", "phone", {
                unique: false
            });

        }
        console.log('資料庫版本更改為： ' + version);
};

onupgradeneeded事件在第一次打開頁面初始化資料庫時會被調用，或在當有版本號變化時。所以，你應該在onupgradeneeded函數里創建你的存儲數據。如果沒有版本號變化，而且頁面之前被打開過，你會獲得一個onsuccess事件。

2. 添加數據

a) 首先需要創建一個事務，並要求具有讀寫許可權

var transaction = db.transaction(storeName, 'readwrite');

b) 獲取objectStore，再調用add方法添加數據

var store = transaction.objectStore(storeName);

    var request = store.get(key);

    request.onsuccess = function(e) {

        data = e.target.result;

        console.log(student.name);

};

3.刪除數據

刪除跟新增一樣，需要創建事務，然後調用刪除介面，通過key刪除對象。

var transaction = db.transaction(storeName, 'readwrite');

    var store = transaction.objectStore(storeName);

store.delete(key);

4.查找數據

a) 按key查找

開啟事務，獲取objectStore，調用往get()方法，往方法里傳入對象的key值，取出相應的對象

var transaction = db.transaction(storeName, 'readwrite');

    var store = transaction.objectStore(storeName);

    var request = store.get(key);

    request.onsuccess = function(e) {

        data = e.target.result;

        console.log(student.name);

};

b) 使用索引查找

我們可以在創建object store的時候指明索引，使用object store的createIndex創建索引，方法有三個參數：索引名稱、索引屬性欄位名、索引屬性值是否唯一。

objectStore.createIndex("name", "name", {
                unique: false

            });

如上代碼中，我們建好了name索引，就可以用該索引來進行查詢了：

var transaction = db.transaction(storeName);

    var store = transaction.objectStore(storeName);

    var index = store.index(search_index);

    index.get(value).onsuccess = function(e) {

        data = e.target.result;

        console.log(student.id);

}

c) 游標遍曆數據

對資料庫熟悉的同學很好理解游標的作用，有了資料庫object store的游標，我們就可以利用游標遍歷object store了。

var transaction = db.transaction(storeName);

    var store = transaction.objectStore(storeName);

    var request = store.openCursor();//打開游標

    var dataList = new Array();

    var i = 0;

    request.onsuccess = function(e) {

        var cursor = e.target.result;

        if (cursor) {

            console.log(cursor.key);

            dataList[i] = cursor.value;

            console.log(dataList[i].name);

            i++;

            cursor.continue();

        }

        data = dataList;

};

4.更新對象

更新對象，首先要把它取出來，修改，然後再放回去。

var transaction = db.transaction(storeName, 'readwrite');

    var store = transaction.objectStore(storeName);

    var request = store.get(key);

    request.onsuccess = function(e) {

        var data = e.target.result;

        for (a in newData) {

            //除了keypath之外

 

            data.a = newData.a;

        }

        store.put(data);

};

5.關閉與刪除資料庫

關閉資料庫可以直接調用資料庫對象的close方法

function closeDB(db) {

    db.close();

}

刪除資料庫使用資料庫對象的deleteDatabase方法

function deleteDB(name) {

    indexedDB.deleteDatabase(name);

}

總結

以上就是indexedDB的一些基本概念以及使用，由於篇幅原因，還有一些更深入的細節沒有介紹，比如indexedDB的游標結合索引，發揮其真正的優勢，有興趣的小伙伴可以繼續深入研究，還有就是要註意瀏覽器的支持問題，IE9以及更早的版本並不支持，火狐和谷歌瀏覽器沒有問題，推薦使用，文章如果紕漏或者不足，歡迎指正~