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 官方封装库