IndexedDB 一句话理解
浏览器里的大容量本地数据库,比 localStorage 能存更多、更复杂的数据。
📊 对比 localStorage
| 特性 | localStorage | IndexedDB |
|---|---|---|
| 容量 | 5MB | 至少 250MB,甚至 GB 级 |
| 数据类型 | 字符串 | 任何 JS 对象、文件、二进制 |
| 查询方式 | 键值对 | 键值、索引、范围查询 |
| 速度 | 同步(阻塞) | 异步(不阻塞页面) |
🎯 使用场景(什么时候用?)
用 localStorage:
- 存 token、用户设置等小数据
- 简单键值对,数据量 < 5MB
用 IndexedDB:
- 离线应用的全部数据
- 用户生成的内容(图片、笔记)
- 应用缓存(大量 API 数据)
- 编辑器草稿自动保存
💡 使用示例
// 存文件/图片
await db.put('files', { id: 'photo1', name: '头像.jpg', data: fileBlob, // 二进制文件 size: '2MB' });
// 复杂查询(localStorage 做不到)
const expensiveProducts = await db
.getAllFromIndex('products', 'price', IDBKeyRange.lowerBound(1000));
⚠️ 注意事项
不要用 IndexedDB 存:
- 密码等敏感信息(不安全)
- 实时同步数据(用 WebSocket)
- 服务器端数据(用 API)
应该用 IndexedDB 存:
- 离线可用的用户数据
- 大型应用的本地缓存
- 用户上传的文件本地副本
一句话总结:需要存大量复杂数据且支持离线访问时,用 IndexedDB。

