JavaScript中IndexedDB与LocalStorage的读写性能对比-js教程-PHP中文网

indexeddb 读写性能显著优于 localstorage，尤其在大数据量、频繁操作、并发写入和索引查询场景；前者异步非阻塞、支持事务与结构化数据，后者同步阻塞、仅限字符串键值且无并发控制。

javascript中indexeddb与localstorage的读写性能对比

IndexedDB 的读写性能通常比 LocalStorage 更高，尤其在处理大量数据或频繁操作时。关键差异不在单次小数据的快慢，而在于底层机制：LocalStorage 是同步阻塞式、字符串键值存储，IndexedDB 是异步非阻塞、支持结构化数据与索引查询的数据库。

数据量增大时，性能差距明显

LocalStorage 每次 setItem 或 getItem 都会触发同步磁盘写入（部分浏览器还会序列化整个存储区），数据超过几 MB 就容易卡住主线程；IndexedDB 则通过事务批量提交、后台线程处理，即使存入 10MB JSON 数组或上千条记录，页面仍保持响应。

写入 5000 条对象（每条约 2KB）：LocalStorage 可能耗时 800ms 以上且界面冻结；IndexedDB 通常在 100–300ms，无卡顿
读取子集（如按时间范围筛选）：LocalStorage 必须全量解析字符串再遍历过滤；IndexedDB 可直接用索引游标（IDBKeyRange）高效定位，速度差可达 10 倍以上

并发与事务能力决定实际体验

LocalStorage 不支持并发写入——两个脚本同时调用 setItem 可能相互覆盖；它也没有回滚机制，出错即丢失中间状态。IndexedDB 支持多对象仓库、版本升级、ACID 事务，写入失败可捕获并重试，适合表单草稿、离线日志等场景。

javascript-pro

专注现代 ECMAScript、异步编程、性能优化和全栈的 JavaScript 专家，适用于现代开发

下载

多个 Tab 共享同一 LocalStorage 时，storage 事件延迟不可控，且无法感知其他 Tab 是否写入成功
IndexedDB 同一数据库可在多上下文（Tab / Worker）中打开，事务自动排队，配合 oncomplete 和 onerror 明确控制流程

初始化与使用成本影响开发效率

LocalStorage API 极简：localStorage.setItem('key', 'value') 一行搞定；IndexedDB 需创建数据库、定义对象仓库、处理升级、开启事务、获取对象存储……代码量多 5–10 倍。但现代封装库（如 idb、Dexie.js）已大幅降低门槛，常用操作可压缩到 2–3 行。