[HTML5技术]使用 HTML5 IndexedDB API

request.onerror = function(e) {
 // handle error
 ...
 console.log("Database error: " + e.target.errorCode);
};

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) {
 ...
 };
}

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);
 };
}

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;
 };
}

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"});
 };
}

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 })
 };
}

使用事务


 您需要使用事务在对象存储上执行所有读取和写入操作。类似于关系数据库中的事务的工作原理，IndexedDB 事务提供了数据库写入操作的一个原子集合，这个集合要么完全提交，要么完全不提交。IndexedDB 事务还拥有数据库操作的一个中止和提交工具。


 表 1 列出并描述了 IndexedDB 提供的事务模式。

图片：143514836r8ex6akqymtkm.jpg

表 1. IndexedDB 事务模式

 默认的事务模式为 readonly。您可在任何给定时刻打开多个并发的 readonly 事务，但只能打开一个 readwrite 事务。出于此原因，只有在数据更新时才考虑使用 readwrite 事务。单独的（表示不能打开任何其他并发事务）versionchange 事务操作一个数据库或对象存储。可以在 onupgradeneeded 事件处理函数中使用 versionchange 事务创建、修改或删除一个对象存储，或者将一个索引添加到对象存储。


 要在 readwrite 模式下为 employees 对象存储创建一个事务，可以使用语句：var transaction = db.transaction("employees", "readwrite");。


 清单 7 中的 JavaScript 函数展示了如何使用一个事务，使用键来检索 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 函数展示了如何使用一个事务，以使用 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)