javascript localStorage与sessionStorage有什么区别_如何使用？_网络技术

javascript localStorage与sessionStorage有什么区别_如何使用？

发布时间 - 2026-01-02 00:00:00 点击率：次

localStorage数据永久保存（关浏览器不丢失），sessionStorage仅限当前标签页（关tab即清空）；二者均只支持字符串，存对象需JSON.stringify，取时需JSON.parse；同源下localStorage全局共享，sessionStorage隔离；均不参与HTTP请求。

localStorage 和 sessionStorage 的生命周期差异在哪？

关键区别就一条：localStorage 数据关掉浏览器也不丢，sessionStorage 关掉当前标签页就清空。不是“关浏览器”，而是“关那个页面标签”——哪怕你刷新、跳转、开新窗口，只要没关掉这个 tab，sessionStorage 就还在；但新开一个同域名的 tab，它的 sessionStorage 是完全独立的，互不可见。

localStorage 适合存长期有效的数据：用户主题、记住的搜索词、登录后返回的 token（⚠️注意：不推荐存敏感 token，见下文）
sessionStorage 适合存临时中转状态：多步表单的第 2 步数据、从列表页传到详情页的 id、防重复提交的标记
两者都不发请求、不占带宽，这点和 cookie 本质不同

怎么存对象或数组？为什么直接存会出错？

因为二者只接受字符串——存数字自动转成字符串，存对象却变成 "[object Object]"，取出来就废了。必须手动序列化。

const user = { name: "小明", age: 28 };
// ✅ 正确：存前 JSON.stringify
localStorage.setItem("user", JSON.stringify(user));
// ✅ 正确：取后 JSON.parse
const savedUser = JSON.parse(localStorage.getItem("user"));
console.log(savedUser.name); // "小明"

如果忘了 JSON.stringify，getItem 返回的永远是 "[object Object]"，不是报错，而是静默失败
JSON.parse(null) 会报错，所以建议加一层判断：const data = localStorage.getItem("key"); return data ? JSON.parse(data) : null;
布尔值、null、undefined 存进去也会被转成字符串，读取时需自行转换类型

跨页面/跨标签页能共享吗？

localStorage 同源（协议+域名+端口）下所有页面都能读写，改一个，其他页面立刻可见；sessionStorage 则严格绑定当前 tab，新开 tab 就是全新沙盒。

用 localStorage 做“全局状态同步”要小心：A 页面改了 theme，B 页面不会自动响应——得监听 storage 事件才能感知变化
sessionStorage 在 iframe 里也独立，父子页面之间不能靠它传数据
隐私模式下，Chrome/Safari 会禁用 localStorage，getItem 返回 null，setItem 可能抛 QuotaExceededError

安全与兼容性要注意什么？

别把密码、身份证号、完整 token 往里塞——XSS 攻击能直接读走，毫无防护。

现代浏览器基本都支持（IE8+），但用之前仍建议检测：if (!window.localStorage) { /* fallback */ }
容量约 5MB，但实际因浏览器而异；存太多大对象会拖慢页面，尤其低端设备
localStorage.clear() 是全站清除，不是当前页面——上线前务必确认是否影响其他模块
服务端无法访问它们，所以不要指望用它替代 session 或 cookie 认证逻辑

最常被忽略的一点：你以为存了个对象，其实只存了一串字符串；你以为关了浏览器数据就没了，结果 localStorage 还在那儿等着你下次打开——用之前，先想清楚“它到底活多久”“谁能看到它”“它是不是真该放这儿”。

# javascript # java # js # json # cookie # 浏览器 # 端口 # session # safari # win # 区别

相关栏目：【网站优化151355 】【网络推广146373 】【网络技术251813 】【 AI营销90571 】

上一篇：php会话session怎么调试_php会话状态跟踪调试技巧

下一篇：php订单日志报错怎么看_php订单日志错误代码解读技巧【技

相关栏目网站优化
网络推广
网络技术
AI营销

最新文章 Sublime怎么一键压缩JS代码 Su sublime如何在搜索中使用正则表达式 Sublime如何设置透明窗口效果 Su mysql如何设计商品表结构_mysql css属性背景图不显示怎么办_通过检查路如何使用Golang实现排序_Golan 农历闰月是怎么回事_为合回归年加一月调整塑造《刺客信条》艾吉奥传奇的编剧离开育碧 1英里等于多少公里 1mile和km的换 css grid布局中行和列是如何定义的 PS批量旋转和翻转图片，快速校正图片方向 C# Swagger UI自定义方法 C OPPO手机九宫格和全键盘怎么切换_OP Go语言如何实现用户登录注册_Golan 1节飞行速度多少公里每小时 1节是多少公纸嫁衣8千子树第五章庙门怎么开启庙门 Laravel 多行数据编辑表单中实现逐明日之后如何提升钓鱼等级明日之后提升钓支付宝怎样查年度账单_支付宝年度账单查看 C# 多线程UI更新Dispatcher

上一篇：php会话session怎么调试_php会话状态跟踪调试技巧

下一篇：php订单日志报错怎么看_php订单日志错误代码解读技巧【技