如何使用IndexedDB？完整CRUD操作指南-js教程-PHP中文網

How to use IndexedDB? Guide on complete CRUD Operations

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中的主要操作包括：

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

範例 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