localStorage长期存储且同源共享,sessionStorage仅限当前标签页会话;二者均仅支持字符串、容量约5MB、不参与HTTP请求。

JavaScript 中的本地存储主要靠 localStorage 和 sessionStorage 实现,它们都提供键值对形式的浏览器端数据持久化能力,但生命周期和作用域完全不同。
localStorage:长期保存,跨窗口共享
数据写入后会一直保留在浏览器中,除非手动清除(比如调用 localStorage.clear() 或用户主动删除浏览数据)。同一域名下的所有标签页、窗口都能读写同一份数据。
- 适合存用户偏好设置、主题选择、免登录 Token(注意安全性)等需要长期记住的信息
- 写法示例:
localStorage.setItem('theme', 'dark');读取:localStorage.getItem('theme') - 只支持字符串,存对象需先
JSON.stringify(),读取时再JSON.parse()
sessionStorage:仅限当前会话,页面关闭即失效
数据只在当前浏览器标签页(或窗口)中有效,刷新页面保留,但关闭该标签页后自动清空。不同标签页之间互不干扰,即使同域名也各自独立。
- 适合临时状态,比如表单草稿、多步骤流程中的中间数据、防重复提交的标记
- 写法与 localStorage 完全一致:
sessionStorage.setItem('draft', 'hello world') - 同样只接受字符串,对象需序列化处理
关键区别总结
- 有效期:localStorage 永久(除非手动删),sessionStorage 仅当前标签页生命周期
- 共享范围:localStorage 同源下所有窗口/标签页共享;sessionStorage 仅当前标签页独有
- 容量限制:两者通常都是 5MB 左右(具体取决于浏览器),远大于 Cookie 的 4KB
- 是否随请求发送:都不参与 HTTP 请求,完全由 JS 控制,不像 Cookie 那样自动附加到每个请求头
使用时要注意什么
- 敏感信息(如密码、完整 Token)不要直接存在 localStorage,容易被 XSS 攻击窃取
- 存储前检查是否可用(部分隐私模式或禁用 JS 的环境可能不可用):
if (typeof localStorage !== 'undefined') { ... } - 监听存储变化可使用
storage事件,但它只在其他同源窗口触发修改时才生效,当前窗口改不会触发自己 - 避免频繁读写大量数据,可能影响性能;大对象建议压缩或分片










