JavaScript本地存储有三种方式:1. localStorage用于长期键值对存储,数据跨会话保留,容量5–10MB,仅支持字符串;2. sessionStorage限于单标签页会话,关闭即清除,适合临时状态;3. IndexedDB是异步NoSQL数据库,支持结构化数据、事务和索引,容量更大,适用于复杂离线场景。

JavaScript本地存储主要有三种方式:localStorage、sessionStorage 和 IndexedDB。它们在生命周期、容量限制、数据类型支持和使用场景上各有不同。
localStorage:长期保存的键值对存储
localStorage 以字符串形式保存数据,数据会一直保留在浏览器中,除非手动清除或通过代码删除。适合存用户偏好、主题设置等需要跨会话保留的信息。
- 容量通常为 5–10MB(因浏览器而异)
- 仅支持字符串,存对象需先 JSON.stringify(),读取时要 JSON.parse()
- 同源(协议+域名+端口)下共享,不随请求发送到服务器
- 不支持事务、索引或复杂查询
sessionStorage:页面会话级的临时存储
sessionStorage 和 localStorage 接口一致,但数据只在当前浏览器标签页有效,关闭标签页即被清除。适合暂存表单草稿、导航状态等单次会话内有用的数据。
- 生命周期绑定于页面会话,新开标签页互不共享
- 同样只支持字符串,有类似容量限制
- 无法跨页面(即使同源)共享,刷新页面仍保留
IndexedDB:功能完整的客户端数据库
IndexedDB 是一个低级、异步、支持事务的 NoSQL 数据库,能存储结构化数据(如对象、文件、二进制数据),适合离线应用、缓存大量资源或需复杂查询的场景。
立即学习“Java免费学习笔记(深入)”;
- 容量远大于 localStorage(通常可达数百 MB,由浏览器策略动态分配)
- 支持索引、游标遍历、增删改查、事务回滚
- 异步 API,避免阻塞主线程;但 API 较复杂,常配合封装库(如 Dexie.js)使用
- 同源限制,但可存储 ArrayBuffer、Blob 等非字符串类型
基本上就这些。选哪种取决于你的需求:简单配置用 localStorage,临时状态用 sessionStorage,复杂数据管理或离线优先应用就该上 IndexedDB。










