Web Storage容量通常为2.5–10MB且仅支持字符串，无法查询、索引或存储二进制数据；IndexedDB容量可达GB级，支持结构化数据、索引、异步查询及事务，适用于大数据量与复杂操作场景。

当数据量超过几MB、需要存对象或文件、或者要按条件查数据时，Web Storage 就不够用了，得换 IndexedDB。

容量差距很实际

Web Storage（包括 localStorage 和 sessionStorage）在绝大多数浏览器里是硬性上限：桌面端通常 10MB/origin，iOS Safari 可能只有 5MB。一旦写入超出，直接报 QUOTA_EXCEEDED_ERR（DOM Exception 22），操作中断。

IndexedDB 没有固定上限。Chrome 允许单个 origin 占用磁盘“临时存储”的最高 80%，实际可达数 GB；Firefox 和 Opera 也按可用空间动态分配；Safari 虽初期配额偏保守，但可向用户申请扩容。

你可以用 navigator.storage.estimate() 实时查当前配额和已用空间，方便做容量预判。

不只是“能不能存下”，更是“怎么存、怎么用”

Web Storage 只接受字符串——哪怕存一个对象，也得先 JSON.stringify()，读取再 JSON.parse()。没有索引、不能查询，想找个特定字段的记录，只能遍历全部键值对。

IndexedDB 支持原生存对象、数组、Blob、ArrayBuffer 等结构化数据。可建索引、用游标做范围查询、条件筛选、分页读取。比如存 1000 条日志，查“今天错误级别为 error 的前 20 条”，IndexedDB 几毫秒搞定；localStorage 得全拉出来手动过滤。

性能表现随数据量明显分化

小数据（如单条配置）：localStorage 写入约 0.5ms，IndexedDB 约 2.1ms，差异不明显。

大数据（如 1MB 日志、1000 条记录）：

• localStorage 写入耗时飙升到 1250ms，读取也要近 1s，且全程同步阻塞页面
• IndexedDB 写入仅约 320ms，读取约 210ms，全部异步，UI 不卡顿
• 做条件查询时，localStorage 无法原生支持，IndexedDB 游标查询只要 15ms 左右

典型该换 IndexedDB 的场景

以下情况别硬撑用 localStorage：

• 离线缓存整页 HTML、图片或视频片段（含 Blob）
• 保存用户大量表单草稿、编辑历史、本地笔记内容
• 存储带时间戳、分类、状态等字段的结构化数据（如待办、聊天记录、行为日志）
• 需要支持搜索、排序、分页、增量更新等交互逻辑
• 单次存的数据 > 2MB，或长期累积预期超 5MB