无需登录 数据私有 本地保存

存储读写速度测试 - localStorage vs IndexedDB

13
0
0
0

浏览器存储读写速度测试

localStorage vs IndexedDB — 同步与异步存储性能对比，帮助开发者选择合适的前端存储方案

🏃
快速测试
1 KB × 100 条
📦
中等负载
100 KB × 30 条
💪
压力测试
500 KB × 6 条
⚙️
自定义
手动调整参数
总预估: 100 KB
总数据量接近 localStorage 的 5MB 限制，localStorage 测试可能失败
常见问题与知识点
localStorage 和 IndexedDB 的核心区别是什么？
localStorage 是同步的键值存储，API 简单，适合存储少量字符串数据，容量约 5-10MB。IndexedDB 是异步的 NoSQL 数据库，支持存储结构化对象、二进制数据和索引查询，容量可达数百 MB 甚至 GB 级别。异步特性意味着 IndexedDB 不会阻塞主线程，适合大数据量操作。
什么场景应该使用 localStorage？
localStorage 适合存储少量简单数据，如用户偏好设置、主题配置、JWT Token、表单草稿等。它的优势在于 API 极其简单（setItem / getItem），同步读取方便快捷。但当数据量超过几百 KB 或条目数较多时，同步操作会阻塞 UI 线程，影响用户体验。
IndexedDB 适合哪些应用场景？
IndexedDB 适合离线应用、PWA、大量结构化数据的本地缓存、文件存储等场景。例如：离线文档编辑器、音乐播放器的本地曲库、电商购物车数据持久化、日志收集等。它支持事务、索引和范围查询，功能远超简单的键值存储。
localStorage 的 5MB 限制是硬性限制吗？
是的，大多数浏览器对每个源的 localStorage 限制在 5-10MB 左右（不同浏览器略有差异）。超出限制时会抛出 QuotaExceededError。这是浏览器层面的硬性限制，无法通过代码绕过。而 IndexedDB 的存储上限通常是磁盘可用空间的一定比例，远比 localStorage 充裕。
为什么本测试中 localStorage 写入小数据时反而更快？
对于极小数据量（如 1KB×100条），localStorage 的同步写入省去了 IndexedDB 事务创建、Promise 调度等异步开销，因此可能更快。但随着数据量增大，localStorage 的同步阻塞特性会拖慢整体性能，而 IndexedDB 的异步批量写入优势开始显现。这就是为什么大数据场景下 IndexedDB 遥遥领先。
IndexedDB 的异步特性对性能有什么影响？
异步操作意味着 IndexedDB 的读写不会阻塞 JavaScript 主线程，页面在数据操作期间依然可以响应用户交互。此外，IndexedDB 可以在单个事务中批量处理多条数据，大幅减少 I/O 开销。但这种异步模型也增加了编程复杂度，需要使用 Promise 或回调来处理结果。
如何选择合适的浏览器存储方案？
选择策略：
• 数据量 < 100KB 且结构简单 → localStorage
• 需要离线功能或存储大量结构化数据 → IndexedDB
• 需要同步读取的配置项 → localStorage
• 需要事务、索引、范围查询 → IndexedDB
• 临时会话数据 → sessionStorage
在实际项目中，往往同时使用多种存储方案各司其职。
🔧 相关工具