前端存儲之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 鼓勵使用的基本模式以下所示：

1. 打開數據庫而且開始一個事務。
2. 建立一個 object store。
3. 構建一個請求來執行一些數據庫操做，像增長或提取數據等。
4. 經過監聽正確類型的 DOM 事件以等待操做完成。
5. 在操做結果上進行一些操做（能夠在 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以及更早的版本並不支持，火狐和谷歌瀏覽器沒有問題，推薦使用，文章若是紕漏或者不足，歡迎指正~