IndexedDB 是浏览器内置支持事务的 NoSQL 数据库，用于 Web 应用持久化存储大量结构化数据，尤其适合离线场景；其 CRUD 操作需按“打开数据库→创建/获取对象仓库→事务中执行”流程进行，关键包括 onupgradeneeded 初始化、put()/add() 增改、get()/openCursor() 查询、delete()/clear() 删除，并推荐 Promise 封装与通用工具封装以提升可维护性。
IndexedDB 是浏览器内置的、支持事务的 NoSQL 数据库，适合在 Web 应用中持久化存储大量结构化数据，尤其适用于离线场景。实现 CRUD（增删改查）操作的核心是：打开数据库 → 创建/获取对象仓库（Object Store）→ 在事务中执行操作。下面分步骤说明关键操作和实用写法。
打开数据库并创建对象仓库
首次打开时需监听 onupgradeneeded 事件来初始化结构；后续打开直接复用已有结构。
示例代码逻辑：
- 调用
window.indexedDB.open("myDB", 1)打开或新建数据库（版本号为 1） - 在
onupgradeneeded中检查event.oldVersion，决定是否新建或升级对象仓库 - 使用
db.createObjectStore("users", { keyPath: "id" })创建主键为id的仓库 - 可选：用
store.createIndex("email", "email", { unique: true })添加索引便于按字段查询
添加（Create）和更新（Update）数据
插入新记录或覆盖同主键记录都用 add() 或 put()。区别在于：add() 遇到重复主键会报错；put() 自动覆盖，更常用。
操作必须在事务中进行：
- 通过
db.transaction(["users"], "readwrite")获取读写事务 - 用
transaction.objectStore("users").put({ id: 1, name: "张三", email: "zhang@example.com" }) - 监听
request.onsuccess确认写入完成，request.onerror捕获失败（如主键冲突、存储空间不足）
读取（Read）单条或多条数据
根据查询方式不同，有几种常用方法：
-
按主键读取：用
get(key)，例如store.get(1)获取 id=1 的用户 -
按索引读取：先获取索引
store.index("email").get("zhang@example.com") -
范围查询或遍历：用
openCursor()或getAll()（注意getAll()不支持条件过滤，适合小量数据） - 复杂条件建议结合
IDBKeyRange，例如IDBKeyRange.bound(10, 20)查询 id 在 10–20 之间的记录
删除（Delete）数据
删除同样依赖事务，支持按主键或按范围清除：
- 删除单条：
store.delete(1) - 删除多条：
store.delete(IDBKeyRange.bound("2024-01-01", "2024-12-31"))（适用于日期主键） - 清空整个仓库：
store.clear()，但需谨慎使用 - 所有 delete 操作返回请求对象，可通过
onsuccess确认结果
实际开发中建议封装通用方法（如 dbUtil.add()、dbUtil.findByIndex()），统一处理事务生命周期和错误提示。注意 IndexedDB 是异步 API，避免嵌套过深，可配合 Promise 封装提升可读性。离线时只要数据已存入，页面刷新后依然可用；上线后可结合网络状态同步到服务端。
