浏览器IndexedDB技术，5分钟讲清楚-育师

IndexedDB 是浏览器端（客户端）的NoSQL 面向对象数据库，用于持久化存储大量结构化数据（如对象、数组、文件等），是 Web 平台提供的客户端存储解决方案之一（与 localStorage、sessionStorage 同属“Web Storage”家族，但能力更强）。关键是IndexedDB不需要单独安装，它是浏览器原生支持的 Web 标准 API，现代浏览器（Chrome、Firefox、Safari、Edge、Opera 等）均默认集成了该 API，无需用户手动下载、安装任何额外软件或库。

一、核心定位与特点

IndexedDB 的设计目标是解决传统 Web 存储（localStorage/sessionStorage）的局限性：

大容量：通常支持几十 MB 到数百 MB的存储（具体取决于浏览器和设备，远大于localStorage的 ~5MB 限制）；
异步操作：所有 API 都是异步的（基于回调或 Promise），不会阻塞主线程（避免页面卡顿）；
结构化存储：以对象仓库（Object Store）为单位存储数据（类似数据库的“表”），值可以是任意 JavaScript 对象（无需序列化为字符串）；
索引与高效查询：支持为对象属性创建索引（类似数据库的“索引列”），能通过索引快速过滤/排序数据（比遍历所有数据高效得多）；
事务支持：所有操作都在事务中执行（保证数据一致性，比如“转账”式的多步操作要么全成功，要么全回滚）；
离线可用：数据存储在用户本地浏览器，无需网络即可访问（适合离线应用）。

二、与其他 Web 存储的区别

特性	localStorage/sessionStorage	IndexedDB
存储类型	键值对（值必须是字符串）	键值对（值可以是任意对象）
容量	~5MB	几十~几百 MB
操作方式	同步（阻塞主线程）	异步（非阻塞）
查询能力	仅能通过键精确查找	支持索引、范围查询、排序
适用场景	小量简单数据（如用户偏好）	大量结构化数据（如离线缓存）

三、核心概念

理解 IndexedDB 需先掌握几个关键术语：

数据库（Database）：每个域名下可创建多个数据库（默认版本号从 1 开始），用于存储相关数据。
对象仓库（Object Store）：数据库中的“表”，用于存储键值对（键是唯一标识，值可以是对象）。例如，一个“笔记”应用的 Object Store 可存每篇笔记的标题、内容、时间等。
索引（Index）：为 Object Store 中的某个属性创建的“快捷查询通道”。例如，为“笔记”的“创建时间”属性建索引，就能快速找到“最近7天的笔记”。
事务（Transaction）：所有操作（增删改查）必须在事务中执行，保证原子性（要么全成，要么全败）。
游标（Cursor）：用于遍历 Object Store 或索引中的数据（类似数据库的“指针”）。

四、典型使用场景

IndexedDB 是离线优先应用（Offline-first）和PWA（渐进式 Web 应用）的核心技术之一，常见场景包括：

离线数据缓存：比如将新闻列表、商品详情等数据存到本地，无网络时仍能展示；
复杂客户端存储：比如笔记/待办应用的多条记录、离线地图的瓦片数据、大型表单的草稿；
高效查询需求：比如电商应用的“按价格区间筛选商品”“按销量排序”；
本地文件存储：结合 Blob 对象，可存图片、音频等二进制文件（比如离线相册）。

五、注意事项

兼容性：现代浏览器（Chrome、Firefox、Safari、Edge）均支持，但 IE10+ 部分支持（已淘汰，无需考虑）；
同源策略：每个域名下的 IndexedDB 独立，不同域名无法互相访问；
异步 API：需用回调或async/await（结合 Promise 封装）处理，避免同步等待；
数据清理：浏览器可能会自动清理长期未用的 IndexedDB 数据（比如用户手动清除缓存时）。

六、简单示例（概念演示）

以下是一个创建数据库→添加数据→查询数据的简化流程（用 Promise 封装）：

// 打开/创建数据库（名为“myDB”，版本1） const request = indexedDB.open("myDB", 1); request.onupgradeneeded = (e) => { const db = e.target.result; // 创建对象仓库（"notes"，键为自增ID） const store = db.createObjectStore("notes", { keyPath: "id", autoIncrement: true }); // 为“title”属性创建索引（允许重复） store.createIndex("titleIndex", "title", { unique: false }); }; request.onsuccess = (e) => { const db = e.target.result; // 开启事务（操作“notes”仓库，读+写模式） const tx = db.transaction("notes", "readwrite"); const store = tx.objectStore("notes"); // 添加一条笔记 store.add({ title: "第一篇笔记", content: "Hello IndexedDB!" }); // 通过索引查询标题包含“第一篇”的笔记 const index = store.index("titleIndex"); const request = index.get("第一篇笔记"); // 精确查询 request.onsuccess = () => console.log(request.result); // {id:1, title: "...", content: "..."} };