localStorage与sessionStorage均存储字符串且受同源策略限制,区别在于:1. localStorage同域所有标签页共享、永久保存;2. sessionStorage仅当前标签页有效、关闭即销毁;二者均不参与HTTP传输。

localStorage 是浏览器提供的持久化键值存储 API,数据不会过期,除非手动清除或用户主动删除。
localStorage 和 sessionStorage 有什么区别
两者都存字符串,但生命周期和作用域不同:
-
localStorage:同一域名下所有标签页共享,数据永久保存(除非代码调用removeItem()或用户清缓存) -
sessionStorage:仅当前标签页有效,关闭标签页即销毁 - 二者都不随 HTTP 请求发送,不占用带宽,也无服务端参与
- 都受同源策略限制 ——
https://a.com和https://b.com互不可读
怎么存、取、删数据(基础操作)
所有值都会被自动转成字符串;想存对象必须先 JSON.stringify(),读取时再 JSON.parse():
localStorage.setItem('user', JSON.stringify({id: 123, name: 'Alice'}));
const user = JSON.parse(localStorage.getItem('user') || '{}');
localStorage.removeItem('user');
常见错误:
立即学习“Java免费学习笔记(深入)”;
- 直接存对象:
localStorage.setItem('obj', {x: 1})→ 实际存入"[object Object]" - 没处理
null或空字符串导致JSON.parse(null)报错 → 建议用JSON.parse(str || '{}')或try...catch - 超过 5MB(多数浏览器限制)会抛
QuotaExceededError,需捕获异常
localStorage 有哪些典型使用场景
适合存轻量、非敏感、可丢失的客户端状态:
- 用户偏好设置(主题色、语言、字体大小)
- 表单草稿(比如长文本编辑框内容,刷新后恢复)
- 登录态标记(配合后端 token 使用,但不要存密码或敏感 token)
- 离线缓存简单配置或静态资源哈希(如
localStorage.setItem('version', '2.3.1'))
不适合:
- 需要服务端校验的数据(localStorage 可被用户任意修改)
- 高频写入(如每秒存一次计时器),可能触发性能抖动
- 跨域共享(无法绕过同源策略)
兼容性和替代方案要注意什么
IE8+ 支持 localStorage,但 IE8 的实现有 bug(如 key 包含特殊字符时失效);现代项目基本无需考虑降级。真正容易被忽略的是:
- 隐身模式下部分浏览器(如 Safari)默认禁用
localStorage,会直接抛异常 → 必须包裹try/catch - 某些 iOS 版本在页面卸载前(如微信内嵌浏览器)可能丢数据,不能依赖它做关键状态同步
- 如需加密或更可靠存储,应结合
IndexedDB或服务端 session,而非硬扛 localStorage
实际写的时候,别只写 localStorage.setItem 就完事,先测是否可用,再决定 fallback 方案。











