HTML5 – IndexedDB

HTML5提供了一个基于键值对的数据库API，IndexedDB，它可以在浏览器中存储大量结构化数据，并且在运行时进行高效的访问。IndexedDB将数据存储在机器上，与传统的cookie和其他客户端存储方法相比，IndexedDB提供了更高效的存储和检索性能。

创建和打开数据库

在使用IndexedDB API之前，需要先创建和打开数据库。下面的代码展示了如何使用IndexedDB API创建和打开一个“myDatabase”的数据库：

var request = window.indexedDB.open("myDatabase", 1);

request.onerror = function(event) {
  // Handle errors.
};
request.onupgradeneeded = function(event) {
  var db = event.target.result;

  // Create an objectStore for this database
  var objectStore = db.createObjectStore("customers", { keyPath: "id" });

  // Create indexes for each property
  objectStore.createIndex("name", "name", { unique: false });
  objectStore.createIndex("email", "email", { unique: true });
};

request.onsuccess = function(event) {
  var db = event.target.result;
};

添加数据

一旦打开了数据库，就可以使用IndexedDB API添加或检索数据。下面的代码展示了如何使用IndexedDB API向先前创建的“myDatabase”数据库添加一个新客户：

var customer = {
  id: 123456,
  name: "Bob",
  email: "bob@example.com"
};

var transaction = db.transaction(["customers"], "readwrite");
var objectStore = transaction.objectStore("customers");
var request = objectStore.add(customer);

request.onsuccess = function(event) {
  console.log("Customer has been added to database");
};

request.onerror = function(event) {
  console.log("Error occurred while adding customer to database");
};

检索数据

IndexedDB API提供了多种方法来检索存储在数据库中的数据。例如，可以按ID、名称或电子邮件地址检索客户数据，如下所示：

var transaction = db.transaction(["customers"]);
var objectStore = transaction.objectStore("customers");
var index = objectStore.index("name");

var request = index.get("Bob");

request.onsuccess = function(event) {
  var customer = event.target.result;
  console.log("Customer found:", customer);
};

request.onerror = function(event) {
  console.log("Error occurred while searching for customer");
};

更新数据

如果已经检索了存储在数据库中的数据，则可以使用IndexedDB API更新该数据。下面的代码展示了如何使用IndexedDB API更新先前添加的名为“Bob”的客户的电子邮件地址：

var transaction = db.transaction(["customers"], "readwrite");
var objectStore = transaction.objectStore("customers");

var request = objectStore.get(123456);

request.onsuccess = function(event) {
  var customer = event.target.result;
  customer.email = "newemail@example.com";

  var requestUpdate = objectStore.put(customer);

  requestUpdate.onsuccess = function(event) {
    console.log("Customer data updated successfully");
  };

  requestUpdate.onerror = function(event) {
    console.log("Error occurred while updating customer data");
  };
};

request.onerror = function(event) {
  console.log("Error occurred while searching for customer");
};

删除数据

以同样的方式，可以使用IndexedDB API删除数据库中存储的数据。下面的代码展示了如何使用IndexedDB API删除先前添加的名为“Bob”的客户：

var transaction = db.transaction(["customers"], "readwrite");
var objectStore = transaction.objectStore("customers");

var request = objectStore.delete(123456);

request.onsuccess = function(event) {
  console.log("Customer data deleted successfully");
};

request.onerror = function(event) {
  console.log("Error occurred while deleting customer data");
};

结论

IndexedDB是HTML5提供的一个非常适合于浏览器客户端存储和检索大量结构化数据的API。它提供了一个可扩展性和性能优化的方法，使得开发者能够在本地存储和检索数据，而无需使用cookie或其他客户端存储方法。同时，IndexedDB还提供了许多强大的功能，例如索引和键值对，这使得数据检索变得非常容易。无论是Web应用程序还是移动应用程序，IndexedDB都是一个极好的解决方案，可以实现本地存储和检索数据的需求。