localstorage适合存少量简单不常变数据，indexeddb适合大量结构化数据；前者同步阻塞、上限5–10mb、仅键值对存储，后者异步非阻塞、容量大、支持索引事务和复杂查询。
LocalStorage适合存少量结构简单、不常变动的数据，比如用户偏好设置、临时缓存；IndexedDB更适合处理大量结构化数据，支持索引、事务和异步操作，是真正意义上的前端数据库。
数据量与性能表现
LocalStorage上限通常为5–10MB（各浏览器略有差异），且所有操作同步阻塞主线程。写入或读取较大JSON（如超过1MB）时，页面明显卡顿。IndexedDB没有硬性容量限制（受磁盘空间和浏览器策略约束），单库可轻松管理数百MB甚至GB级数据，所有API均为异步，不影响UI响应。
- 存100条用户收货地址？LocalStorage够用
- 缓存离线地图瓦片或本地日志文件？必须用IndexedDB
- 频繁增删查改带条件筛选的数据？IndexedDB支持多索引，查询效率高
数据结构与查询能力
LocalStorage只能以字符串形式存储键值对，复杂对象需手动JSON.stringify()和JSON.parse()，无法按字段检索。IndexedDB原生支持对象存储，可为任意字段建立索引，支持范围查询、游标遍历、按条件批量删除等。
- 想查“2024年创建的所有笔记”？LocalStorage得全量读出再filter，IndexedDB可用索引+IDBKeyRange精准定位
- 需要事务保障（如转账：扣款+记账必须同时成功或失败）？只有IndexedDB提供ACID事务支持
- 要监听数据变更并触发UI更新？IndexedDB可配合自定义事件或封装成Observable模式
兼容性与开发成本
LocalStorage几乎无兼容问题，一行代码就能用：localStorage.setItem('theme', 'dark')。IndexedDB在Chrome/Firefox/Safari/Edge中均支持良好（IE10+），但API较底层，需处理版本升级、对象仓库创建、错误重试等逻辑。推荐使用封装库如idb（轻量、Promise化、TypeScript友好）降低使用门槛。
- 项目周期短、需求简单、团队前端经验有限？优先LocalStorage + 合理降级策略
- 构建PWA、离线优先应用、或需长期维护的中大型系统？直接上IndexedDB更可持续
- 已有LocalStorage代码但数据量激增？可渐进迁移：新模块用IndexedDB，旧数据按需导出转换
安全与生命周期
两者都遵循同源策略，但LocalStorage内容会随浏览器缓存清理一并清除（如用户勾选“清除历史记录”时容易误删）；IndexedDB数据相对更“持久”，多数浏览器不会在常规清理中删除它。注意：它们都不加密，敏感信息（如token、密码片段）不应直接存储，应结合服务端验证与短期有效机制。
- 存JWT access_token？建议LocalStorage + 短期过期 + 刷新机制
- 存用户生成的文档草稿、表单快照？IndexedDB更稳妥，不易被误清
- 涉及隐私数据？无论哪种方案，都要明确告知用户并提供一键清除入口
不复杂但容易忽略：选型不是非此即彼。实际项目中常见混合使用——用LocalStorage存开关标识和小配置，用IndexedDB管主体业务数据，再辅以内存缓存（如Map）提升高频访问性能。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
