介紹
IndexedDB是HTML5 WEB數(shù)據(jù)庫(kù)，允許HTML5 WEB應(yīng)用在用戶瀏覽器端存儲(chǔ)數(shù)據(jù)。對(duì)于應(yīng)用來(lái)說(shuō)IndexedDB非常強(qiáng)大、有用，可以在客戶端的Chrome,IE,Firefox等WEB瀏覽器中存儲(chǔ)大量數(shù)據(jù)，下面簡(jiǎn)單介紹一下IndexedDB的基本概念。
什么是IndexedDB
IndexedDB，HTML5新的數(shù)據(jù)存儲(chǔ)，可以在客戶端存儲(chǔ)、操作數(shù)據(jù)，可以使應(yīng)用加載地更快，更好地響應(yīng)。它不同于關(guān)系型數(shù)據(jù)庫(kù)，擁有數(shù)據(jù)表、記錄。它影響著我們?cè)O(shè)計(jì)和創(chuàng)建應(yīng)用程序的方式。IndexedDB 創(chuàng)建有數(shù)據(jù)類型和簡(jiǎn)單的javaScript持久對(duì)象的object，每個(gè)object可以有索引，使其有效地查詢和遍歷整個(gè)集合。本文為您提供了如何在Web應(yīng)用程序中使用IndexedDB的真實(shí)例子。
開(kāi)始
我們需要在執(zhí)行前包含下面前置代碼
Javascript Code復(fù)制內(nèi)容到剪貼板
var indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB;
//PRefixes of window.IDB objects
var IDBTransaction = window.IDBTransaction || window.webkitIDBTransaction || window.msIDBTransaction;
var IDBKeyRange = window.IDBKeyRange || window.webkitIDBKeyRange || window.msIDBKeyRange
if (!indexedDB) {
alert("Your browser doesn't support a stable version of IndexedDB.")
}
打開(kāi)IndexedDB
在創(chuàng)建數(shù)據(jù)庫(kù)之前，我們首先需要為數(shù)據(jù)庫(kù)創(chuàng)建數(shù)據(jù)，假設(shè)我們有如下的用戶信息：
JavaScript Code復(fù)制內(nèi)容到剪貼板
var userData = [
{ id: "1", name: "Tapas", age: 33, email: "tapas@example.com" },
{ id: "2", name: "Bidulata", age: 55, email: "bidu@home.com" }
];
現(xiàn)在我們需要用open()方法打開(kāi)我們的數(shù)據(jù)庫(kù):
JavaScript Code復(fù)制內(nèi)容到剪貼板
var db;
var request = indexedDB.open("databaseName", 1);
request.onerror = function(e) {
console.log("error: ", e);
};
request.onsuccess = function(e) {
db = request.result;
console.log("success: "+ db);
};
request.onupgradeneeded = function(e) {
}
如上所示，我們已經(jīng)打開(kāi)了名為"databaseName"，指定版本號(hào)的數(shù)據(jù)庫(kù)，open()方法有兩個(gè)參數(shù)：
1.第一個(gè)參數(shù)是數(shù)據(jù)庫(kù)名稱，它會(huì)檢測(cè)名稱為"databaseName"的數(shù)據(jù)庫(kù)是否已經(jīng)存在，如果存在則打開(kāi)它，否則創(chuàng)建新的數(shù)據(jù)庫(kù)。
2.第二個(gè)參數(shù)是數(shù)據(jù)庫(kù)的版本，用于用戶更新數(shù)據(jù)庫(kù)結(jié)構(gòu)。
onSuccess處理
發(fā)生成功事件時(shí)“onSuccess”被觸發(fā)，如果所有成功的請(qǐng)求都在此處理，我們可以通過(guò)賦值給db變量保存請(qǐng)求的結(jié)果供以后使用。
onerror的處理程序
發(fā)生錯(cuò)誤事件時(shí)“onerror”被觸發(fā)，如果打開(kāi)數(shù)據(jù)庫(kù)的過(guò)程中失敗。
Onupgradeneeded處理程序
如果你想更新數(shù)據(jù)庫(kù)(創(chuàng)建，刪除或修改數(shù)據(jù)庫(kù))，那么你必須實(shí)現(xiàn)onupgradeneeded處理程序，使您可以在數(shù)據(jù)庫(kù)中做任何更改。 在“onupgradeneeded”處理程序中是可以改變數(shù)據(jù)庫(kù)的結(jié)構(gòu)的唯一地方。
創(chuàng)建和添加數(shù)據(jù)到表：
IndexedDB使用對(duì)象存儲(chǔ)來(lái)存儲(chǔ)數(shù)據(jù)，而不是通過(guò)表。 每當(dāng)一個(gè)值存儲(chǔ)在對(duì)象存儲(chǔ)中，它與一個(gè)鍵相關(guān)聯(lián)。 它允許我們創(chuàng)建的任何對(duì)象存儲(chǔ)索引。 索引允許我們?cè)L問(wèn)存儲(chǔ)在對(duì)象存儲(chǔ)中的值。 下面的代碼顯示了如何創(chuàng)建對(duì)象存儲(chǔ)并插入預(yù)先準(zhǔn)備好的數(shù)據(jù)：
JavaScript Code復(fù)制內(nèi)容到剪貼板
request.onupgradeneeded = function(event) {
var objectStore = event.target.result.createObjectStore("users", {keyPath: "id"});
for (var i in userData) {
objectStore.add(userData[i]);
}
}
我們使用createObjectStore()方法創(chuàng)建一個(gè)對(duì)象存儲(chǔ)。 此方法接受兩個(gè)參數(shù)： - 存儲(chǔ)的名稱和參數(shù)對(duì)象。 在這里，我們有一個(gè)名為"users"的對(duì)象存儲(chǔ)，并定義了keyPath，這是對(duì)象唯一性的屬性。 在這里，我們使用“id”作為keyPath，這個(gè)值在對(duì)象存儲(chǔ)中是唯一的，我們必須確保該“ID”的屬性在對(duì)象存儲(chǔ)中的每個(gè)對(duì)象中存在。 一旦創(chuàng)建了對(duì)象存儲(chǔ)，我們可以開(kāi)始使用for循環(huán)添加數(shù)據(jù)進(jìn)去。
手動(dòng)將數(shù)據(jù)添加到表：
我們可以手動(dòng)添加額外的數(shù)據(jù)到數(shù)據(jù)庫(kù)中。
JavaScript Code復(fù)制內(nèi)容到剪貼板
function Add() {
var request = db.transaction(["users"], "readwrite").objectStore("users")
.add({ id: "3", name: "Gautam", age: 30, email: "gautam@store.org" });
request.onsuccess = function(e) {
alert("Gautam has been added to the database.");
};
request.onerror = function(e) {
alert("Unable to add the information.");
}
}
之前我們?cè)跀?shù)據(jù)庫(kù)中做任何的CRUD操作(讀，寫，修改)，必須使用事務(wù)。 該transaction()方法是用來(lái)指定我們想要進(jìn)行事務(wù)處理的對(duì)象存儲(chǔ)。 transaction()方法接受3個(gè)參數(shù)(第二個(gè)和第三個(gè)是可選的)。 第一個(gè)是我們要處理的對(duì)象存儲(chǔ)的列表，第二個(gè)指定我們是否要只讀/讀寫，第三個(gè)是版本變化。
從表中讀取數(shù)據(jù)
get()方法用于從對(duì)象存儲(chǔ)中檢索數(shù)據(jù)。 我們之前已經(jīng)設(shè)置對(duì)象的id作為的keyPath，所以get()方法將查找具有相同id值的對(duì)象。 下面的代碼將返回我們命名為“Bidulata”的對(duì)象：
JavaScript Code復(fù)制內(nèi)容到剪貼板
function Read() {
var objectStore = db.transaction(["users"]).objectStore("users");
var request = objectStore.get("2");
request.onerror = function(event) {
alert("Unable to retrieve data from database!");
};
request.onsuccess = function(event) {
if(request.result) {
alert("Name: " + request.result.name + ", Age: " + request.result.age + ", Email: " + request.result.email);
} else {
alert("Bidulata couldn't be found in your database!");
}
};
}
從表中讀取所有數(shù)據(jù)
下面的方法檢索表中的所有數(shù)據(jù)。 這里我們使用游標(biāo)來(lái)檢索對(duì)象存儲(chǔ)中的所有數(shù)據(jù)：
JavaScript Code復(fù)制內(nèi)容到剪貼板
function ReadAll() {
var objectStore = db.transaction("users").objectStore("users");
var req = objectStore.openCursor();
req.onsuccess = function(event) {
db.close();
var res = event.target.result;
if (res) {
alert("Key " + res.key + " is " + res.value.name + ", Age: " + res.value.age + ", Email: " + res.value.email);
res.continue();
}
};
req.onerror = function (e) {
console.log("Error Getting: ", e);
};
}
該openCursor()用于遍歷數(shù)據(jù)庫(kù)中的多個(gè)記錄。 在continue()函數(shù)中繼續(xù)讀取下一條記錄。
刪除表中的記錄
下面的方法從對(duì)象中刪除記錄。
JavaScript Code復(fù)制內(nèi)容到剪貼板
function Remove() {
var request = db.transaction(["users"], "readwrite").objectStore("users").delete("1");
request.onsuccess = function(event) {
alert("Tapas's entry has been removed from your database.");
};
}
我們要將對(duì)象的keyPath作為參數(shù)傳遞給delete()方法。
最終代碼
下面的方法從對(duì)象源中刪除一條記錄：
JavaScript Code復(fù)制內(nèi)容到剪貼板
新聞熱點(diǎn)
疑難解答
圖片精選
