SessionStorage 仅限当前标签页会话，关闭即销毁，适合表单草稿等临时状态；LocalStorage 持久化跨标签页，适合用户偏好等长期数据，但需防覆盖与安全风险。

Sess

什么时候该用 sessionStorage？看会话边界

它只活在“当前标签页+当前页面刷新”这个范围内。关闭标签页、关掉浏览器、甚至新开同地址的标签页，数据都不共享、不继承。

• 适合存临时状态：比如表单草稿（用户没提交就刷新了，还能恢复）、多步流程中的中间步骤（如地址→支付→确认）、播放器当前进度（仅限本窗口）
• 不能用于判断“用户是否刚进入”：因为刷新页面不会清空 sessionStorage，但关闭再打开就会清空——这点常被误判
• iframe 同源时可共享：如果页面嵌了同域 iframe，它们共用同一个 sessionStorage 实例，这点比很多人想的更“粘”

什么时候该用 localStorage？看持久性与跨页需求

只要域名不变，数据就一直躺在硬盘里，重启浏览器、换标签页、甚至几天后回来，都能读到。

• 适合存用户偏好：主题色、语言、折叠面板状态；也适合缓存非敏感静态资源（如离线词典、配置项）
• 注意同步问题：如果两个标签页同时写同一个 key，后写的会覆盖前写的，且无事件通知——storage 事件能监听到变化，但无法阻止竞争写入
• 别存敏感信息：它不加密、不防 XSS，token 或密码明文塞进去等于裸奔；哪怕加了 base64 也算“裸奔”

为什么不能混用？常见翻车现场

错误不是语法报错，而是行为不符合预期：

• 用 sessionStorage 存登录态 → 用户开第二个标签页就登出（因为新标签页没有该 session 数据）
• 用 localStorage 存表单草稿 → 用户在 A 标签页填一半，切到 B 标签页继续填，结果 A 的草稿被 B 覆盖（同 key 写入）
• 以为 sessionStorage 能防刷新丢失 → 没问题；但以为它能防“用户手滑关掉整个浏览器” → 就会丢数据
• 在 Safari 的无痕模式下测试 → localStorage 可能直接抛 QuotaExceededError，连 setItem 都失败，需兜底 try/catch

兼容性和容量：别信“5MB”这个数字

标称容量是假象。实际可用空间受浏览器、私有模式、磁盘配额策略影响极大：

• Chrome 正常模式约 10MB，但无痕模式可能只剩几百 KB；Safari 移动端曾长期卡在 2.5MB
• 检测是否可用不能只靠 typeof localStorage !== 'undefined'，还得 try 写入再读取验证
• 存对象必须 JSON.stringify()，读取后必须 JSON.parse()；直接存 null 或 undefined 会被转成字符串 "null"，容易引发类型 bug

真正难的不是记住区别，而是预判用户操作路径——他会不会开多个标签页？会不会关浏览器再回来？会不会在 iframe 里跳转？这些场景决定了该锁死作用域，还是主动共享状态。

# js  # json  # 浏览器  # 硬盘  # session  # safari  # 区别  # 作用域  # sessionstorage  # 为什么  # chrome  # xss  # NULL 

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

相关推荐： Laravel如何发送系统通知？（Notification渠道示例）  在Oracle关闭情况下如何修改spfile的参数  微信小程序 配置文件详细介绍  Laravel API资源(Resource)怎么用_格式化Laravel API响应的最佳实践  QQ浏览器网页版登录入口 个人中心在线进入  php静态变量怎么调试_php静态变量作用域调试技巧【解答】  如何在建站宝盒中设置产品搜索功能？  Python数据仓库与ETL构建实战_Airflow调度流程详解  Laravel如何实现事件和监听器？（Event & Listener实战）  Laravel如何监控和管理失败的队列任务_Laravel失败任务处理与监控  javascript中闭包概念与用法深入理解  手机软键盘弹出时影响布局的解决方法  Laravel怎么调用外部API_Laravel Http Client客户端使用  如何快速搭建虚拟主机网站？新手必看指南  香港服务器建站指南：免备案优势与SEO优化技巧全解析  Laravel如何使用Spatie Media Library_Laravel图片上传管理与缩略图生成【步骤】  高端建站如何打造兼具美学与转化的品牌官网？  BootStrap整体框架之基础布局组件  Laravel如何实现数据库事务？（DB Facade示例）  JavaScript Ajax实现异步通信  长沙企业网站制作哪家好,长沙水业集团官方网站？  微信小程序 五星评分(包括半颗星评分)实例代码  Laravel如何创建自定义中间件？（Middleware代码示例）  如何实现建站之星域名转发设置？  Laravel如何生成PDF或Excel文件_Laravel文档导出工具与使用教程  INTERNET浏览器怎样恢复关闭标签页_INTERNET浏览器标签恢复快捷键与方法【指南】  IOS倒计时设置UIButton标题title的抖动问题  Laravel如何设置自定义的日志文件名_Laravel根据日期或用户ID生成动态日志【技巧】  Laravel如何使用Vite进行前端资源打包？（配置示例）  Laravel如何使用Telescope进行调试？（安装和使用教程）  谷歌Google入口永久地址_Google搜索引擎官网首页永久入口  Python文件流缓冲机制_IO性能解析【教程】  实例解析Array和String方法  夸克浏览器网页跳转延迟怎么办 夸克浏览器跳转优化  SQL查询语句优化的实用方法总结  如何用虚拟主机快速搭建网站？详细步骤解析  详解Android图表 MPAndroidChart折线图  Laravel如何实现全文搜索功能？（Scout和Algolia示例）  网站制作价目表怎么做,珍爱网婚介费用多少？  Laravel怎么使用Session存储数据_Laravel会话管理与自定义驱动配置【详解】  简单实现jsp分页  JavaScript实现Fly Bird小游戏  海南网站制作公司有哪些,海口网是哪家的？  Edge浏览器如何截图和滚动截图_微软Edge网页捕获功能使用教程【技巧】  Laravel如何安装使用Debugbar工具栏_Laravel性能调试与SQL监控插件【步骤】  制作公司内部网站有哪些,内网如何建网站？  大同网页,大同瑞慈医院官网？  手机网站制作平台,手机靓号代理商怎么制作属于自己的手机靓号网站？  Laravel项目结构怎么组织_大型Laravel应用的最佳目录结构实践  如何在云服务器上快速搭建个人网站？