如何使用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中文网其他相关文章！