ndexedDB 与 LocalStorage：全面对比分析
📊 IndexedDB 与 LocalStorage：全面对比分析
🌟 前端离线存储解决方案的选型指南，掌握它们的区别、优势与使用场景，让你的项目用对技术、少踩坑！
一、🎯 总览速查表
| 对比维度 | IndexedDB | LocalStorage |
|---|---|---|
| 数据结构支持 | ✅ 键值对、对象、Blob（二进制） | ❌ 只能字符串键值对 |
| 数据容量限制 | 🔼 百 MB ~ GB（具体视浏览器） | 🔽 一般为 5MB 左右 |
| 异步/同步 | ✅ 异步（非阻塞 UI） | ❌ 同步（可能阻塞主线程） |
| API 操作复杂度 | 较复杂（事务、游标、索引） | 非常简单（getItem/setItem） |
| 查询能力 | ✅ 支持索引和条件搜索 | ❌ 不支持 |
| 浏览器支持 | ✅ 所有现代浏览器 | ✅ 所有现代浏览器 |
| 性能与扩展性 | 高，适合大规模数据 | 低，适合小量配置项或 token |
| 持久性 | 高（除非用户清缓存或硬清） | 高 |
| 安全性 | 同源策略保障，同样受 XSS 攻击影响 | 同 |
二、📚 详细功能对比
1. 📁 数据类型支持
-
IndexedDB 支持存储：
- JS 对象（含嵌套）
- 数组
- Blob（二进制，如图片、视频）
- Date、ArrayBuffer 等结构化数据
-
LocalStorage：
- 所有值都必须先
JSON.stringify，只能存字符串。
- 所有值都必须先
🔍 示例：
localStorage.setItem('user', JSON.stringify({ name: 'Jin' }))
const user = JSON.parse(localStorage.getItem('user')!)
而 IndexedDB 可以直接存对象：
store.put({ id: 1, name: 'Jin', avatar: blob })
2. ⚙️ API 复杂度
| 项目 | IndexedDB 示例 | LocalStorage 示例 |
|---|---|---|
| 添加数据 | store.add({ id: 1, name: 'A' }) | localStorage.setItem('a', 'b') |
| 获取数据 | store.get(1)（异步） | localStorage.getItem('a') |
| 删除数据 | store.delete(1) | localStorage.removeItem('a') |
| 清空 | store.clear() | localStorage.clear() |
| 监听变化 | ❌（不支持跨标签页） | ✅（可监听 storage 事件） |
📌 总结：LocalStorage 更简洁，但 IndexedDB 更强大。
3. 🚀 存储容量
| 浏览器 | IndexedDB 限制 | LocalStorage 限制 |
|---|---|---|
| Chrome | 200MB～无限（受磁盘） | 5MB/域名 |
| Firefox | 50MB+ | 5MB |
| Safari | 50MB～ | 5MB |
✅ IndexedDB 是唯一支持大量图片、视频、文档、离线数据的浏览器原生方案。
4. ⚡ 性能对比
| 维度 | IndexedDB | LocalStorage |
|---|---|---|
| 读写速度（小数据） | ✅ 较快 | ✅ 快 |
| 大数据处理 | ✅ 最佳 | ❌ 无法支持 |
| 主线程阻塞 | ❌ 异步 | ✅ 会阻塞 |
⚠️ LocalStorage 在大数据写入时会阻塞页面，严重时会引发卡顿！
三、🧠 使用场景推荐
| 场景 | 推荐方案 | 原因 |
|---|---|---|
| 用户 token / 设置项 | LocalStorage | 简单、快速、无需异步 |
| 聊天记录、评论草稿 | IndexedDB | 数据量大，需持久化，结构复杂 |
| 图片/文件缓存（如缩略图） | IndexedDB | 支持 Blob 存储 |
| 离线商城、PWA、地图 | IndexedDB | 支持大量结构化数据和事务 |
| 跨标签页状态共享 | LocalStorage | 可监听 storage 事件，IndexedDB 不支持 |
四、🛠 封装建议
| 封装层级 | IndexedDB | LocalStorage |
|---|---|---|
| 推荐封装库 | idb、Dexie | 可使用自定义工具函数包一层 |
| Vue 中封装 | ✅ 使用模块/插件封装，提供通用 CRUD 方法 | ✅ 封装为 useLocalStorage composable |
| 错误处理 | 建议统一 try/catch，监听事务异常 | 简单即可 |
五、🧪 实战对比：存储一个用户对象
✅ IndexedDB 示例：
await store.put({ id: 1, name: 'Jin', avatar: blob })
✅ LocalStorage 示例：
localStorage.setItem('user', JSON.stringify({ id: 1, name: 'Jin' }))
区别：
- IndexedDB 可以存二进制图像、多个字段。
- LocalStorage 要序列化为字符串，并且不能超过大小限制。
六、📌 IndexedDB 的常见误解
| 误解 | 正解 |
|---|---|
| 只能存 key-value 字符串 | ❌ IndexedDB 可存任意 JS 对象、Blob、数组等 |
| API 很复杂不能用 | ❌ 配合 idb 或 Dexie 等库，可像 ORM 一样使用 |
| 没有监听机制 | ✅ 虽然不能监听跨标签页变化，但支持事务通知 |
| 使用体验差 | ❌ 搭配封装后体验非常好，且适用于大型数据缓存场景 |
✅ 总结建议
| 如果你需要… | 使用 |
|---|---|
| 快速存储、轻量配置、跨页同步 | LocalStorage |
| 离线支持、大量数据、文件缓存 | IndexedDB |
| 类型安全 + 可维护性 | IndexedDB + 封装库 |
📌 推荐阅读/参考
- 🔗 MDN：IndexedDB 文档
- 🔗 MDN：LocalStorage 文档
- 🔗 idb：Google 官方封装库