在前一個階段的工作中，項目組要開發一個平台，為了做出更好的用戶體驗，實現快速、高質量的交互，從而更快得到用戶的反饋，要求在前端把數據存儲起來，之后我去研究了下現在比較流行的前端存儲數據庫，找到了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以及更早的版本並不支持，火狐和谷歌瀏覽器沒有問題，推薦使用，文章如果紕漏或者不足，歡迎指正~