17370845950

localStorage是浏览器持久化本地存储机制，仅支持字符串、跨页面共享且关浏览器不丢失；需用JSON序列化存对象，与sessionStorage区别在于生命周期和作用域。

localStorage 是浏览器内置的持久化本地存储机制，用起来简单，但几个关键点必须清楚：它只认字符串，跨页面共享，关浏览器也不丢数据。

localStorage 的基本操作

所有操作都通过 setItem、getItem、removeItem 和 clear 四个方法完成：

• 存数据：localStorage.setItem("theme", "dark") —— 键和值都必须是字符串
• 取数据：const theme = localStorage.getItem("theme") —— 不存在时返回 null，不是 undefined
• 删单个：localStorage.removeItem("theme")
• 清空全部：localStorage.clear()

存对象或数组时要手动序列化：
localStorage.setItem("user", JSON.stringify({name: "小明", age: 28}))
读取时再解析：
const user = JSON.parse(localStorage.getItem("user"))

localStorage 和 sessionStorage 的核心区别

两者 API 完全一致，差异集中在生命周期和作用域：

• localStorage：数据永久保留，同一源（协议+域名+端口）下所有页面都能访问，关闭浏览器、重启电脑都不影响
• sessionStorage：仅限当前标签页，关掉该页就清空；新开同域名标签页也拿不到之前的数据
• 两者都不发往服务器，不参与 HTTP 请求，这点和 cookie 本质不同
• 都受同源策略限制，跨域页面无法互通

什么时候该选哪个？

选错容易引发逻辑 bug 或体验问题：

• 用 localStorage 存长期配置类数据：深色模式开关、语言偏好、记住的用户名、登录 token（注意：token 不建议明文存，需结合其他安全措施）
• 用 sessionStorage 存临时中转状态：多步表单的中间数据、跳转时携带的 ID、防重复提交的标记
• 两者都不能存敏感信息（如密码、身份证号、完整银行卡号），XSS 攻击可直接读取

常见坑点提醒

实际开发中容易忽略的细节：

• 忘了 JSON 序列化/反序列化，导致存进去是 [object Object]，取出来无法使用
• 误以为 sessionStorage 在多个标签页间共享，结果状态丢失
• 在非同源环境（比如 iframe 跨域、localhost vs 127.0.0.1）下尝试读写，静默失败
• 未做兼容性判断，老版本 IE 或某些 WebView 可能不支持，可用 if (typeof localStorage !== 'undefined') 防御