HTML5 – IndexedDB

HTML5提供了一個基于鍵值對的數據庫API，IndexedDB，它可以在瀏覽器中存儲大量結構化數據，并且在運行時進行高效的訪問。愛掏網 - it200.comIndexedDB將數據存儲在機器上，與傳統的cookie和其他客戶端存儲方法相比，IndexedDB提供了更高效的存儲和檢索性能。愛掏網 - it200.com

在使用IndexedDB API之前，需要先創建和打開數據庫。愛掏網 - it200.com下面的代碼展示了如何使用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添加或檢索數據。愛掏網 - it200.com下面的代碼展示了如何使用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提供了多種方法來檢索存儲在數據庫中的數據。愛掏網 - it200.com例如，可以按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更新該數據。愛掏網 - it200.com下面的代碼展示了如何使用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刪除數據庫中存儲的數據。愛掏網 - it200.com下面的代碼展示了如何使用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。愛掏網 - it200.com它提供了一個可擴展性和性能優化的方法，使得開發者能夠在本地存儲和檢索數據，而無需使用cookie或其他客戶端存儲方法。愛掏網 - it200.com同時，IndexedDB還提供了許多強大的功能，例如索引和鍵值對，這使得數據檢索變得非常容易。愛掏網 - it200.com無論是Web應用程序還是移動應用程序，IndexedDB都是一個極好的解決方案，可以實現本地存儲和檢索數據的需求。愛掏網 - it200.com