如何使用IndexedDB？完整CRUD操作指南

IndexedDB 綜合指南：瀏覽器的用戶端儲存動力源

隨著 Web 應用程式變得越來越複雜，對高效能客戶端儲存解決方案的需求也在成長。 IndexedDB 是一種用於儲存大量結構化資料的低階 API，對於希望創建強大且具有離線功能的應用程式的 Web 開發人員、軟體工程師和 Web 愛好者來說，這是一個強大的工具。

在這篇部落格中，我們將透過實際範例探討 IndexedDB 是什麼、它是如何運作的以及如何有效地使用它。無論您是建立漸進式 Web 應用程式 (PWA)、複雜的儀表板還是遊戲，IndexedDB 都可以幫助您無縫管理資料。

---

什麼是 IndexedDB？

IndexedDB 是一個基於瀏覽器的 NoSQL 資料庫，設計用於儲存大量結構化數據，包括檔案和 blob。與 cookie 或 localStorage 不同，IndexedDB 允許您以結構化格式儲存資料並使用索引對其進行查詢，使其成為複雜用例的理想選擇。

IndexedDB 的主要特點：

• 非同步操作：與IndexedDB的互動是非阻塞的，確保效能流暢。
• 結構化資料儲存：以鍵值對的形式儲存數據，透過索引實現高效查詢。
• 離線功能：資料儲存在本地，無需網路連線即可存取。
• 大儲存限制：與 cookie 或 localStorage 相比，提供更多的儲存容量。

IndexedDB 的用例：

• 漸進式網路應用程式：儲存離線資料以獲得無縫體驗。
• 大數據儲存：保存大型資料集，例如使用者首選項或應用程式狀態。
• 快取：快取 API 回應以提高效能。

---

IndexedDB 入門

IndexedDB 是如何運作的？

IndexedDB 運作的資料庫結構包括：

• 資料庫：資料的頂層容器。
• 物件儲存：儲存資料的表，每個表都由唯一的名稱識別。
• 索引：最佳化物件儲存中查詢的結構。

IndexedDB API：基本操作

IndexedDB中的主要操作包括：

1. 開啟資料庫：建立或存取資料庫。
2. 建立物件儲存：定義資料儲存。
3. 執行CRUD操作：新增、讀取、更新和刪除資料。
4. 使用事務：以原子方式管理資料操作。

---

範例 1：建立並開啟資料庫

以下是如何使用物件儲存使用者建立名為 MyDatabase 的 IndexedDB 資料庫。

const dbName = "MyDatabase";
const dbVersion = 1; // Versioning is required for schema updates.

const request = indexedDB.open(dbName, dbVersion);

request.onupgradeneeded = function (event) {
  const db = event.target.result;

  // Create an object store named 'users' with 'id' as the keyPath
  if (!db.objectStoreNames.contains("users")) {
    db.createObjectStore("users", { keyPath: "id" });
  }
  console.log("Database setup complete");
};

request.onsuccess = function (event) {
  const db = event.target.result;
  console.log("Database opened successfully");
};

request.onerror = function (event) {
  console.error("Error opening database:", event.target.errorCode);
};

說明：

• indexedDB.open 方法開啟或建立資料庫。

• 建立新資料庫或升級資料庫版本時會觸發 onupgradeneeded 事件。

• 建立名為 users 的物件存儲，並以 id 作為主鍵。

---

範例 2：將資料新增至物件存儲

您可以使用交易將資料新增至物件儲存。

function addUser(id, name, email) {
  const request = indexedDB.open("MyDatabase", 1);

  request.onsuccess = function (event) {
    const db = event.target.result;
    const transaction = db.transaction("users", "readwrite");
    const objectStore = transaction.objectStore("users");

    const user = { id, name, email };
    const addRequest = objectStore.add(user);

    addRequest.onsuccess = function () {
      console.log("User added:", user);
    };

    addRequest.onerror = function (event) {
      console.error("Error adding user:", event.target.errorCode);
    };
  };
}

// Add a new user
addUser(1, "John Doe", "john.doe@example.com");

說明：

• 建立一個讀寫模式的交易來修改資料。

• add 方法將資料插入到使用者物件儲存中。

---

範例 3：從物件儲存讀取數據

使用 get 方法檢索資料或迭代所有條目。

function getUser(id) {
  const request = indexedDB.open("MyDatabase", 1);

  request.onsuccess = function (event) {
    const db = event.target.result;
    const transaction = db.transaction("users", "readonly");
    const objectStore = transaction.objectStore("users");

    const getRequest = objectStore.get(id);

    getRequest.onsuccess = function () {
      if (getRequest.result) {
        console.log("User found:", getRequest.result);
      } else {
        console.log("User not found");
      }
    };

    getRequest.onerror = function (event) {
      console.error("Error retrieving user:", event.target.errorCode);
    };
  };
}

// Get user with ID 1
getUser(1);

說明：

• get 方法透過其鍵取得特定記錄。

• 資料檢索是非同步的，因此使用成功和錯誤處理程序。

---

範例 4：更新 IndexedDB 中的數據

使用 put 方法更新現有記錄。

function updateUser(id, updatedData) {
  const request = indexedDB.open("MyDatabase", 1);

  request.onsuccess = function (event) {
    const db = event.target.result;
    const transaction = db.transaction("users", "readwrite");
    const objectStore = transaction.objectStore("users");

    const putRequest = objectStore.put({ ...updatedData, id });

    putRequest.onsuccess = function () {
      console.log("User updated:", { ...updatedData, id });
    };

    putRequest.onerror = function (event) {
      console.error("Error updating user:", event.target.errorCode);
    };
  };
}

// Update user with ID 1
updateUser(1, { name: "Johnathan Doe", email: "johnathan.doe@example.com" });

---

範例5：刪除IndexedDB中的數據

使用delete方法刪除一筆記錄。

function deleteUser(id) {
  const request = indexedDB.open("MyDatabase", 1);

  request.onsuccess = function (event) {
    const db = event.target.result;
    const transaction = db.transaction("users", "readwrite");
    const objectStore = transaction.objectStore("users");

    const deleteRequest = objectStore.delete(id);

    deleteRequest.onsuccess = function () {
      console.log("User deleted with ID:", id);
    };

    deleteRequest.onerror = function (event) {
      console.error("Error deleting user:", event.target.errorCode);
    };
  };
}

// Delete user with ID 1
deleteUser(1);

---

IndexedDB 與其他儲存解決方案

Feature	IndexedDB	localStorage	sessionStorage
Storage Limit	Several MB to GB	5 MB (approx)	5 MB (approx)
Data Format	Key-value pairs	Key-value pairs	Key-value pairs
Asynchronous	Yes	No	No
Structured Data	Yes	No	No

---

使用 IndexedDB 的最佳實踐

• 正確使用事務：始終管理事務內的資料操作，以確保原子性。

• 優雅地處理錯誤：實作錯誤處理程序以更好地除錯和使用者回饋。

• 版本控制：小心增加資料庫版本以管理架構變更。

• 測試離線場景：IndexedDB通常用於離線功能；確保其在沒有網路連線的情況下按預期運作。

---

結論

IndexedDB 是一個強大的客戶端資料儲存工具，提供的功能遠遠超越 localStorage 等傳統儲存方法。 IndexedDB 支援結構化資料、大儲存容量和離線功能，是建立現代 Web 應用程式的必備技術。

重點：

• IndexedDB 非常適合在本地儲存大型且複雜的資料集。

• 事務是 IndexedDB 中管理資料操作的核心。

• 它提供強大的離線支持，使其成為漸進式 Web 應用程式的基石。

透過掌握 IndexedDB，您可以建立具有卓越效能和使用者體驗的可擴展、離線優先的應用程式。立即開始在您的專案中嘗試 IndexedDB！

以上是如何使用IndexedDB？完整CRUD操作指南的詳細內容。更多資訊請關注PHP中文網其他相關文章！