如何使用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