IndexedDB增删改查：轻松掌握浏览器数据存储

2023-08-04 21:30:14

IndexedDB：客户端数据存储的强大工具

什么是IndexedDB？

IndexedDB 是一种浏览器的低级 API，它允许 Web 应用程序在客户端存储大量结构化数据。这些数据可以包括文件、二进制大型对象 (BLOB) 等各种类型。IndexedDB 具有跨浏览器兼容性，在所有现代浏览器中都可用，包括 Chrome、Firefox、Safari 和 Edge。

为什么要使用 IndexedDB？

IndexedDB 在存储大量数据方面具有几个关键优势：

高性能： IndexedDB 利用本地存储，可实现快速的数据访问和检索，即使是大量数据集也是如此。
可靠性： IndexedDB 是持久性的，即使关闭浏览器或重新启动计算机，也不会丢失数据。
跨浏览器兼容性： IndexedDB 在所有现代浏览器中都受到支持，确保在不同平台和设备上的应用程序一致性。
可扩展性： IndexedDB 可以处理大量数据，使其非常适合需要存储大量信息的应用程序。

IndexedDB 的增删改查操作

IndexedDB 提供了对数据的 CRUD（创建、读取、更新、删除）操作：

创建（添加）： 可以使用 put() 方法向 IndexedDB 添加数据。该方法接受两个参数：一个唯一的键（用于标识数据）和一个值（存储的数据）。
读取（获取）： 要获取 IndexedDB 中的数据，可以使用 get() 方法。该方法需要键作为参数，如果键存在，它将返回与其关联的值。
更新（修改）： 可以使用 put() 方法更新 IndexedDB 中的数据。该方法也需要键和值作为参数，如果键存在，它将用新值替换旧值。
删除： 可以使用 delete() 方法从 IndexedDB 中删除数据。该方法需要键作为参数，如果键存在，它将从数据库中删除与该键关联的数据。

示例代码

以下代码示例展示了如何使用 IndexedDB 执行增删改查操作：

// 打开 IndexedDB 数据库
const db = indexedDB.open('myDatabase', 1);

// 创建一个事务
const transaction = db.transaction('myObjectStore', 'readwrite');

// 创建一个对象仓库（类似于表）
const objectStore = transaction.objectStore('myObjectStore');

// 添加数据
objectStore.put({ name: 'John Doe', age: 30 });

// 获取数据
objectStore.get('John Doe').onsuccess = (event) => {
  console.log(event.target.result);
};

// 更新数据
objectStore.put({ name: 'John Doe', age: 31 });

// 删除数据
objectStore.delete('John Doe');