IndexedDB 是浏览器内置的本地 NoSQL 数据库，支持事务、索引、版本控制和异步操作，容量达 250MB 起，可存储对象、Blob 等原生类型；而 localStorage 仅 5–10MB、仅字符串、同步阻塞且无索引。
IndexedDB 是浏览器内置的本地 NoSQL 数据库，专为 Web 应用处理大量结构化数据而设计。它不是 localStorage 的放大版，而是一套具备事务、索引、版本控制和异步执行能力的完整数据管理系统。适合做离线缓存、PWA 数据层、聊天记录持久化、大列表本地分页等场景。
为什么不用 localStorage？
localStorage 最大容量通常只有 5–10MB，只支持字符串，所有操作同步阻塞主线程，查数据只能遍历或手动 JSON.parse + filter，无法建索引。当你要存用户行为日志、图片元信息、离线待同步订单、甚至一段音频 Blob 描述时，它就力不从心了。IndexedDB 支持对象、数组、Date、File、Blob 等原生类型，容量普遍达 250MB 起，高端设备可达数 GB，且所有读写都不卡页面。
核心概念要先搞清
打开 IndexedDB 不是“连数据库”，而是按规则组织几层结构：
-
数据库（Database）：顶层容器，有名称和版本号，比如
"notes-app-v2"； -
对象仓库（Object Store）：相当于“表”，但无固定 schema，每条记录是一个 JavaScript 对象，主键可指定字段（如
id）或自增（autoIncrement: true）； -
索引（Index）：必须显式创建，才能按非主键字段高效查询，例如对
createdAt或status建索引，否则只能用游标全量扫描； -
事务（Transaction）：所有增删改查都必须包裹在事务中，
readonly或readwrite模式可选，保证原子性； - 版本升级（onupgradeneeded）：只有版本号升高时才会触发，是唯一能新建/删改对象仓库或索引的地方，不能在普通操作里改结构。
三步跑通一个最简示例
以存储用户笔记为例，用原生 API 实现初始化与写入：
- 调用
indexedDB.open("notes-db", 1)打开或新建数据库； - 在
onupgradeneeded中创建notes仓库，主键设为id，再为title和updatedAt各建一个索引； - 在
onsuccess后，用transaction("notes", "readwrite")获取对象仓库，调用add({ id: 1, title: "入门要点", content: "..." })写入数据。
注意：所有操作都是事件驱动或 Promise 化（现代写法），不能直接 return 结果，需用 await 配合封装库（如 idb）或手动处理 success/error 事件。
推荐起步方式：用封装库代替原生 API
原生 IndexedDB API 层级深、回调嵌套多、错误分散。实际项目建议从 Dexie.js 或 idb 入手：
- Dexie.js 提供类 ORM 语法，支持 TypeScript、链式查询、自动事务、清晰的错误提示；
- idb 是轻量 Promise 封装，仅 3KB，适配原生逻辑习惯，学习成本低；
- 两者都自动处理版本升级、事务包装和兼容性细节，让你专注数据模型和业务逻辑。
比如 Dexie 一行定义表结构：db.version(1).stores({ notes: '++id, title, updatedAt' })，后续 db.notes.add({...}) 直接可用，无需手动开事务。
