如何使用 IndexedDB 实现离线数据的增删改查（CRUD）操作

IndexedDB 是浏览器内置支持事务的 NoSQL 数据库，用于 Web 应用持久化存储大量结构化数据，尤其适合离线场景；其 CRUD 操作需按“打开数据库→创建/获取对象仓库→事务中执行”流程进行，关键包括 onupgradeneeded 初始化、put()/add() 增改、get()/openCursor() 查询、delete()/clear() 删除，并推荐 Promise 封装与通用工具封装以提升可维护性。

IndexedDB 是浏览器内置的、支持事务的 NoSQL 数据库，适合在 Web 应用中持久化存储大量结构化数据，尤其适用于离线场景。实现 CRUD（增删改查）操作的关键在于：打开数据库 → 创建/获取对象仓库（Object Store）→ 在事务中执行操作。下面分步骤说明关键操作和实用写法。

打开数据库并创建对象仓库

首次打开时需监听 onupgradeneeded 事件来初始化结构；后续打开直接复用已有结构。

示例代码逻辑：

1. 调用 window.indexedDB.open("myDB", 1) 打开或新建数据库（版本号为 1）
2. 在 onupgradeneeded 中检查 event.oldVersion，决定是否新建或升级对象仓库
3. 使用 db.createObjectStore("users", { keyPath: "id" }) 创建主键为 id 的仓库
4. 可选：用 store.createIndex("email", "email", { unique: true }) 添加索引便于按字段查询

添加（Create）和更新（Update）数据

插入新记录或覆盖同主键记录都用 add() 或 put()。区别在于：add() 遇到重复主键会报错；put() 自动覆盖，更常用。

操作必须在事务中进行：

1. 通过 db.transaction(["users"], "readwrite") 获取读写事务
2. 用 transaction.objectStore("users").put({ id: 1, name: "张三", email: "[email protected]" })
3. 监听 request.onsuccess 确认写入完成，request.onerror 捕获失败（如主键冲突、存储空间不足）

读取（Read）单条或多条数据

根据查询方式不同，有几种常用方法：

1. 按主键读取：用 get(key)，例如 store.get(1) 获取 id=1 的用户
2. 按索引读取：先获取索引 store.index("email").get("[email protected]")
3. 范围查询或遍历：用 openCursor() 或 getAll()（注意 getAll() 不支持条件过滤，适合小量数据）
4. 复杂条件建议结合 IDBKeyRange，例如 IDBKeyRange.bound(10, 20) 查询 id 在 10–20 之间的记录

删除（Delete）数据

删除同样依赖事务，支持按主键或按范围清除：

1. 删除单条：store.delete(1)
2. 删除多条：store.delete(IDBKeyRange.bound("2024-01-01", "2024-12-31"))（适用于日期主键）
3. 清空整个仓库：store.clear()，但需谨慎使用
4. 所有 delete 操作返回请求对象，可通过 onsuccess 确认结果

实际开发中建议封装通用方法（如 dbUtil.add()、dbUtil.findByIndex()），统一处理事务生命周期和错误提示。注意 IndexedDB 是异步 API，避免嵌套过深，可配合 Promise 封装提升可读性。离线时只要数据已存入，页面刷新后依然可用；上线后可结合网络状态同步到服务端。