IndexedDB:瀏覽器里內置的數據庫

IndexedDB是HTML5規范里新出現的瀏覽器里內置的數據庫。對于在瀏覽器里存儲數據，你可以使用cookies或local storage，但它們都是比較簡單的技術，而IndexedDB提供了類似數據庫風格的數據存儲和使用方式。存儲在IndexedDB里的數據是永久保 存，不像cookies那樣只是臨時的。IndexedDB里提供了查詢數據的功能，在online和offline模式下都能使用。你可以用 IndexedDB存儲大型數據。

IndexedDB里數據以對象的形式存儲，每個對象都有一個key值索引。IndexedDB里的操作都是事務性的。一種對象存儲在一個 objectStore里，objectStore就相當于關系數據庫里的表。IndexedDB可以有很多 objectStore，objectStore里可以有很多對象。每個對象可以用key值獲取。

IndexedDB vs LocalStorage

IndexedDB和LocalStorage都是用來在瀏覽器里存儲數據，但它們使用不同的技術，有不同的用途，你需要根據自己的情況適當的選擇 使用哪種。LocalStorage是用key-value鍵值模式存儲數據，但跟IndexedDB不一樣的是，它的數據并不是按對象形式存儲。它存儲 的數據都是字符串形式。如果你想讓LocalStorage存儲對象，你需要借助JSON.stringify()能將對象變成字符串形式，再用JSON.parse()將字符串還原成對象。但如果要存儲大量的復雜的數據，這并不是一種很好的方案。畢竟，localstorage就是專門為小數量數據設計的，它的api是同步的。

IndexedDB很適合存儲大量數據，它的API是異步調用的。IndexedDB使用索引存儲數據，各種數據庫操作放在事務中執行。IndexedDB甚至還支持簡單的數據類型。IndexedDB比localstorage強大得多，但它的API也相對復雜。

對于簡單的數據，你應該繼續使用localstorage，但當你希望存儲大量數據時，IndexedDB會明顯的更適合，IndexedDB能提供你更為復雜的查詢數據的方式。

IndexedDB vs Web SQL

WebSQL也是一種在瀏覽器里存儲數據的技術，跟IndexedDB不同的是，IndexedDB更像是一個NoSQL數據庫，而WebSQL更像是關系型數據庫，使用SQL查詢數據。W3C已經不再支持這種技術。具體情況請看：http://www.w3.org/TR/webdatabase/。

因為不再支持，所以你就不要在項目中使用這種技術了。

IndexedDB vs Cookies

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

IndexedDB的用法

想要理解IndexedDB，最好的方法是創建一個簡單的web應用：把你們班的學生的學號和姓名存儲在IndexedDB里。IndexedDB里提供了簡單的增、刪、改、查接口。

打開一個IndexedDB數據庫

首先，你需要知道你的瀏覽器是否支持IndexedDB。請使用最新版的谷歌瀏覽器或火狐瀏覽器。低版本的IE是不行的。

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

if(!window.indexedDB)
{
    console.log("你的瀏覽器不支持IndexedDB");
}</pre> 
一旦你的瀏覽器支持IndexedDB，我們就可以打開它。你不能直接打開IndexedDB數據庫。IndexedDB需要你創建一個請求來打開它。

 var request = window.indexedDB.open("testDB", 2);
 
第一個參數是數據庫的名稱，第二個參數是數據庫的版本號。版本號可以在升級數據庫時用來調整數據庫結構和數據。

但你增加數據庫版本號時，會觸發onupgradeneeded事件，這時可能會出現成功、失敗和阻止事件三種情況。

var db;
request.onerror = function(event){
    console.log("打開DB失敗", event);
}
request.onupgradeneeded   = function(event){
    console.log("Upgrading");
    db = event.target.result;
    var objectStore = db.createObjectStore("students", { keyPath : "rollNo" });
};
request.onsuccess  = function(event){
    console.log("成功打開DB");
    db = event.target.result;
}
 
onupgradeneeded事件在第一次打開頁面初始化數據庫時會被調用，或在當有版本號變化時。所以，你應該在onupgradeneeded函數里創建你的存儲數據。如果沒有版本號變化，而且頁面之前被打開過，你會獲得一個onsuccess事件。如果有錯誤發生時則觸發onerror事件。如果你之前沒有關閉連接，則會觸發onblocked事件。

在上面的代碼片段里，我們創建了一個Object Store，叫做“students”，用“rollNo”做數據鍵名。

往ObjectStore里新增對象

為了往數據庫里新增數據，我們首先需要創建一個事務，并要求具有讀寫權限。在indexedDB里任何的存取對象的操作都需要放在事務里執行。

var transaction = db.transaction(["students"],"readwrite");
transaction.oncomplete = function(event) {
    console.log("Success");
};

transaction.onerror = function(event) {
    console.log("Error");
};

var objectStore = transaction.objectStore("students");
objectStore.add({rollNo: rollNo, name: name});</pre> 
從ObjectStore里刪除對象

刪除跟新增一樣，需要創建事務，然后調用刪除接口，通過key刪除對象。

db.transaction(["students"],"readwrite").objectStore("students").delete(rollNo);
 
我把語句合并到了一起，變得更簡單，但效果是一樣的。

通過key取出對象

往get()方法里傳入對象的key值，取出相應的對象。

var request = db.transaction(["students"],"readwrite").objectStore("students").get(rollNo);
request.onsuccess = function(event){
    console.log("Name : "+request.result.name);    
};
 
更新一個對象

為了更新一個對象，首先要把它取出來，修改，然后再放回去。

var transaction = db.transaction(["students"],"readwrite");
var objectStore = transaction.objectStore("students");
var request = objectStore.get(rollNo);
request.onsuccess = function(event){
    console.log("Updating : "+request.result.name + " to " + name);
    request.result.name = name;
    objectStore.put(request.result);
};
 所有的源代碼都在這里。

來自：http://www.webhek.com/indexeddb/