IndexedDB是HTML5規範里新出現的瀏覽器里內置的資料庫。對於在瀏覽器里存儲數據,你可以使用cookies或local storage,但它們都是比較簡單的技術,而IndexedDB提供了類似資料庫風格的數據存儲和使用方式。存儲在IndexedDB里的數據是永久保存,不像cookies那樣只 ...
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");
}
一旦你的瀏覽器支持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});
從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);
};
所有的源代碼都在這裡。如果有任何的問題,請留言,或通過 @歪脖駭客 給我私信