HTML5 的一個重要特性是本地數(shù)據(jù)持久性，它使用戶能夠在線和離線訪問 Web 應(yīng)用程序。此外，本地數(shù)據(jù)持久性使移動應(yīng)用程序更靈敏，使用的帶寬更少，而且能夠在低帶寬場景中更高效地工作。HTML5 提供了一些本地數(shù)據(jù)持久性選項。第一個選項是 localstorage，它支持您使用一個簡單的鍵值對來存儲數(shù)據(jù)。IndexedDB（一個更加強大的選項）支持您本地存儲大量對象，并使用健壯的數(shù)據(jù)訪問機制檢索數(shù)據(jù)。
IndexedDB API 取代了 Web Storage API，后者在 HTML5 規(guī)范中已不推薦使用。（但一些領(lǐng)先的瀏覽器仍然支持 Web Storage，其中包括蘋果公司的 Safari 和 Opera Web 瀏覽器）與 Web Storage 相比，IndexedDB 具有多個優(yōu)勢，其中包括索引、事務(wù)處理和健壯的查詢功能。本文將通過一系列的示例來展示如何管理 IndexedDB 數(shù)據(jù)庫。（參見 下載 一節(jié)，獲取示例的完整源代碼。）
重要概念
一個網(wǎng)站可能有一個或多個 IndexedDB 數(shù)據(jù)庫，每個數(shù)據(jù)庫必須具有惟一的名稱。
一個數(shù)據(jù)庫可包含一個或多個對象存儲。一個對象存儲（由一個名稱惟一標識）是一個記錄集合。每個記錄有一個鍵 和一個值。該值是一個對象，可擁有一個或多個屬性。鍵可能基于某個鍵生成器，從一個鍵路徑衍生出來，或者是顯式設(shè)置。一個鍵生成器自動生成惟一的連續(xù)正整數(shù)。鍵路徑定義了鍵值的路徑。它可以是單個 JavaScript 標識符或多個由句點分隔的標識符。
規(guī)范中包含一個異步 API 和一個同步 API。同步 API 用于 Web 瀏覽器中。異步 API 使用請求和回調(diào)。
在以下示例中，輸出附加到一個具有 ID result 的 div 標記上。要更新 result 元素，可在每個數(shù)據(jù)操作期間清除并設(shè)置 innerHTML 屬性。每個示例 JavaScript 函數(shù)由 HTML 按鈕的一個 onclick 事件調(diào)用。
處理錯誤或異常和調(diào)試
所有異步請求都有一個 onsuccess 回調(diào)和一個 onerror 回調(diào)，前者在數(shù)據(jù)庫操作成功時調(diào)用，后者在一個操作未成功時調(diào)用。清單 1 是一個 onerror 回調(diào)的示例。
清單 1. 異步錯誤處理函數(shù)
request.onerror = function(e) {
// handle error
...
console.log("Database error: " + e.target.errorCode);
};
在使用 IndexedDB API 時，使用 JavaScript try/catch 塊是一個不錯的想法。此功能對處理可能在數(shù)據(jù)庫操作之前發(fā)生的錯誤和異常很有用，比如在數(shù)據(jù)庫未打開時嘗試讀取或操作數(shù)據(jù)，或者在另一個讀/寫事務(wù)已打開時嘗試寫入數(shù)據(jù)。
IndexedDB 很難調(diào)試和排除故障，因為在許多情況下，錯誤消息是泛泛的，缺乏信息價值。在開發(fā)應(yīng)用程序時，可以使用 console.log 和 JavaScript 調(diào)試工具，比如用于 Mozilla Firefox 的 Firebug，或者 Chrome 內(nèi)置的 Developer Tools。對于任何 JavaScript 密集型應(yīng)用程序，這些工具的價值是無可估量的，它們尤其適用于使用 IndexedDB API 的 HTML5 應(yīng)用程序。
使用數(shù)據(jù)庫
一個數(shù)據(jù)庫一次只能有一個版本。在首次創(chuàng)建數(shù)據(jù)庫時，它的初始版本編號為 0。創(chuàng)建數(shù)據(jù)庫之后，數(shù)據(jù)庫（和它的對象存儲）只能通過一種稱為 versionchange 的特殊類型的事務(wù)來更改。要在創(chuàng)建數(shù)據(jù)庫后更改它，必須打開具有更高版本的數(shù)據(jù)庫。此操作會觸發(fā) upgradeneeded 事件。修改數(shù)據(jù)庫或?qū)ο蟠鎯Φ拇a必須位于 upgradeneeded 事件處理函數(shù)中。
清單 2 中的代碼段展示了如何創(chuàng)建數(shù)據(jù)庫：調(diào)用 open 方法并傳遞數(shù)據(jù)庫名稱。如果不存在具有指定名稱的數(shù)據(jù)庫，則會創(chuàng)建該數(shù)據(jù)庫。
清單 2. 創(chuàng)建一個新的數(shù)據(jù)庫
function createDatabase() {
var openRequest = localDatabase.indexedDB.open(dbName);
openRequest.onerror = function(e) {
console.log("Database error: " + e.target.errorCode);
};
openRequest.onsuccess = function(event) {
console.log("Database created");
localDatabase.db = openRequest.result;
};
openRequest.onupgradeneeded = function (evt) {
...
};
}
要刪除現(xiàn)有數(shù)據(jù)庫，可以調(diào)用 deleteDatabase 方法，并傳遞要刪除的數(shù)據(jù)庫名稱，如 清單 3 中所示。
清單 3. 刪除現(xiàn)有數(shù)據(jù)庫
function deleteDatabase() {
var deleteDbRequest = localDatabase.indexedDB.deleteDatabase(dbName);
deleteDbRequest.onsuccess = function (event) {
// database deleted successfully
};
deleteDbRequest.onerror = function (e) {
console.log("Database error: " + e.target.errorCode);
};
}
清單 4 中的代碼段展示了如何打開與現(xiàn)有數(shù)據(jù)庫的連接。
清單 4. 打開數(shù)據(jù)庫的最新版本
function openDatabase() {
var openRequest = localDatabase.indexedDB.open("dbName");
openRequest.onerror = function(e) {
console.log("Database error: " + e.target.errorCode);
};
openRequest.onsuccess = function(event) {
localDatabase.db = openRequest.result;
};
}
創(chuàng)建、刪除和打開數(shù)據(jù)庫就是這么簡單。現(xiàn)在是時候使用對象存儲了。
使用對象存儲
對象存儲是一個數(shù)據(jù)記錄集合。要在現(xiàn)有數(shù)據(jù)庫中創(chuàng)建一個新對象存儲，則需要對現(xiàn)有數(shù)據(jù)庫進行版本控制。為此，請打開要進行版本控制的數(shù)據(jù)庫。除了數(shù)據(jù)庫名稱之外，open 方法還接受版本號作為第二個參數(shù)。如果希望創(chuàng)建數(shù)據(jù)庫的一個新版本（也就是說，要創(chuàng)建或修改一個對象存儲），只需打開具有現(xiàn)有數(shù)據(jù)庫版本更高的數(shù)據(jù)庫。這會調(diào)用 onupgradeneeded 事件處理函數(shù)。
要創(chuàng)建一個對象存儲，可以在數(shù)據(jù)庫對象上調(diào)用 createObjectStore 方法，如 清單 5 中所示。
清單 5. 創(chuàng)建對象存儲
function createObjectStore() {
var openRequest = localDatabase.indexedDB.open(dbName, 2);
openRequest.onerror = function(e) {
console.log("Database error: " + e.target.errorCode);
};
openRequest.onsuccess = function(event) {
localDatabase.db = openRequest.result;
};
openRequest.onupgradeneeded = function (evt) {
var employeeStore = evt.currentTarget.result.createObjectStore
("employees", {keyPath: "id"});
};
}
我們已經(jīng)了解了對象存儲的工作原理。接下來，讓我們看看索引 如何引用包含數(shù)據(jù)的對象存儲。
使用索引
除了使用鍵來檢索對象存儲中的記錄，還可使用代索引的字段來檢索記錄。對象存儲可具有一個或多個索引。索引是一種特殊的對象存儲，它引用包含數(shù)據(jù)的對象存儲，在更改所引用的對象存儲時（也就是添加、修改或刪除記錄時）自動更新。
要創(chuàng)建一個索引，必須使用 清單 5 中所示的方法對數(shù)據(jù)庫進行版本控制。索引可以是惟一的，也可以是不惟一的。惟一索引要求索引中的所有值都是惟一的，比如使用一個電子郵件地址字段。當(dāng)某個值可以重復(fù)出現(xiàn)時，需要使用非惟一索引，比如城市、州或國家。清單 6 中的代碼段展示了如何在 employee 對象的 state 字段上創(chuàng)建一個非惟一索引，在 ZIP code 字段上創(chuàng)建一個非惟一索引，并在 email address 字段上創(chuàng)建一個惟一索引：
清單 6. 創(chuàng)建索引
function createIndex() {
var openRequest = localDatabase.indexedDB.open(dbName, 2);
openRequest.onerror = function(e) {
console.log("Database error: " + e.target.errorCode);
};
openRequest.onsuccess = function(event) {
db = openRequest.result;
};
openRequest.onupgradeneeded = function (evt) {
var employeeStore = evt.currentTarget.result.objectStore("employees");
employeeStore.createIndex("stateIndex", "state", { unique: false });
employeeStore.createIndex("emailIndex", "email", { unique: true });
employeeStore.createIndex("zipCodeIndex", "zip_code", { unique: false })
};
}
接下來，您將使用事務(wù)對對象存儲執(zhí)行一些操作。
使用事務(wù)
您需要使用事務(wù)在對象存儲上執(zhí)行所有讀取和寫入操作。類似于關(guān)系數(shù)據(jù)庫中的事務(wù)的工作原理，IndexedDB 事務(wù)提供了數(shù)據(jù)庫寫入操作的一個原子集合，這個集合要么完全提交，要么完全不提交。IndexedDB 事務(wù)還擁有數(shù)據(jù)庫操作的一個中止和提交工具。
表 1 列出并描述了 IndexedDB 提供的事務(wù)模式。
表 1. IndexedDB 事務(wù)模式
默認的事務(wù)模式為 readonly。您可在任何給定時刻打開多個并發(fā)的 readonly 事務(wù)，但只能打開一個 readwrite 事務(wù)。出于此原因，只有在數(shù)據(jù)更新時才考慮使用 readwrite 事務(wù)。單獨的（表示不能打開任何其他并發(fā)事務(wù)）versionchange 事務(wù)操作一個數(shù)據(jù)庫或?qū)ο蟠鎯Α？梢栽?onupgradeneeded 事件處理函數(shù)中使用 versionchange 事務(wù)創(chuàng)建、修改或刪除一個對象存儲，或者將一個索引添加到對象存儲。
要在 readwrite 模式下為 employees 對象存儲創(chuàng)建一個事務(wù)，可以使用語句：var transaction = db.transaction("employees", "readwrite");。
清單 7 中的 JavaScript 函數(shù)展示了如何使用一個事務(wù)，使用鍵來檢索 employees 對象存儲中的一條特定的員工記錄。
清單 7. 使用鍵獲取一個特定的記錄
function fetchEmployee() {
try {
var result = document.getElementById("result");
result.innerHTML = "";
if (localDatabase != null && localDatabase.db != null) {
var store = localDatabase.db.transaction("employees").objectStore("employees");
store.get("E3").onsuccess = function(event) {
var employee = event.target.result;
if (employee == null) {
result.value = "employee not found";
}
else {
var jsonStr = JSON.stringify(employee);
result.innerHTML = jsonStr;
}
};
}
}
catch(e){
console.log(e);
}
}
清單 8 中的 JavaScript 函數(shù)展示了如何使用一個事務(wù)，以使用 emailIndex 索引而不是對象存儲鍵來檢索 employees 對象存儲中的特定員工記錄。
清單 8. 使用索引獲取特定的記錄
function fetchEmployeeByEmail() {
try {
var result = document.getElementById("result");
result.innerHTML = "";
if (localDatabase != null && localDatabase.db != null) {
var range = IDBKeyRange.only("john.adams@somedomain.com");
var store = localDatabase.db.transaction("employees")
.objectStore("employees");
var index = store.index("emailIndex");
index.get(range).onsuccess = function(evt) {
var employee = evt.target.result;
var jsonStr = JSON.stringify(employee);
result.innerHTML = jsonStr;
};
}
}
catch(e)
【網(wǎng)站聲明】本站除付費源碼經(jīng)過測試外，其他素材未做測試，不保證完整性，網(wǎng)站上部分源碼僅限學(xué)習(xí)交流，請勿用于商業(yè)用途。如損害你的權(quán)益請聯(lián)系客服QQ：2655101040 給予處理，謝謝支持。