localStorage长期保存且同域标签页共享，sessionStorage仅限当前标签页、关闭即销毁；二者均只存字符串、容量约5–10MB、不参与HTTP请求。

localStorage 和 sessionStorage 都是浏览器提供的客户端数据存储机制，用于在用户本地保存键值对（字符串），但它们的生命周期和作用域完全不同。

localStorage：长期保存，跨会话有效

数据一旦写入，就一直保留在浏览器中，除非被代码主动删除或用户手动清除缓存。关闭标签页、重启浏览器甚至重启电脑都不会丢失。

• 适用场景：用户偏好设置（如主题、语言）、登录态标记（配合后端 token 使用）、离线缓存数据
• 写法示例：localStorage.setItem('theme', 'dark')
• 读取示例：localStorage.getItem('theme')
• 注意：只能存字符串；对象需先 JSON.stringify()，读取后要 JSON.parse()

sessionStorage：仅限当前标签页，关闭即销毁

数据只在当前浏览器标签页（或窗口）中有效，页面刷新保留，但关闭该标签页后数据自动清空。不同标签页之间互不共享。

• 适用场景：表单草稿临时保存、多步骤流程中的中间状态、一次性验证码或跳转参数
• 写法示例：sessionStorage.setItem('step', '2')
• 读取示例：sessionStorage.getItem('step')
• 注意：同样只支持字符串，对象需序列化/反序列化

关键区别一目了然

• 有效期：localStorage 永久（直到清除）；sessionStorage 仅当前会话（标签页）
• 共享范围：两者都按协议+域名+端口隔离；localStorage 同域名所有标签页共享；sessionStorage 仅本标签页可用
• 容量限制：通常都是 5–10MB 左右（因浏览器而异），远大于 Cookie 的 4KB
• 是否随请求发送：都不参与 HTTP 请求，完全由 JS 控制，比 Cookie 更轻量、更隐私

用错的常见坑

• 把敏感信息（如密码、完整 token）直接存在 localStorage —— XSS 攻击可直接读取，不安全
• 期望 sessionStorage 在新标签页打开时还能访问（比如 window.open() 或链接 target="_blank"）—— 实际上是全新会话，数据为空
• 存对象不处理 JSON 转换，导致 getItem() 返回 "[object Object]" 这种无意义字符串

# javascript  # java  # js  # json  # cookie  # 浏览器  # 电脑  # 端口  # session  # 后端  # win  # 区别 

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

相关推荐： 北京专业网站制作设计师招聘,北京白云观官方网站？  JS中页面与页面之间超链接跳转中文乱码问题的解决办法  Swift中switch语句区间和元组模式匹配  Laravel任务队列怎么用_Laravel Queues异步处理任务提升应用性能  Laravel怎么实现验证码(Captcha)功能  如何用5美元大硬盘VPS安全高效搭建个人网站？  免费的流程图制作网站有哪些,2025年教师初级职称申报网上流程？  如何在万网利用已有域名快速建站？  如何自定义safari浏览器工具栏？个性化设置safari浏览器界面教程【技巧】  惠州网站建设制作推广,惠州市华视达文化传媒有限公司怎么样？  如何用已有域名快速搭建网站？  Laravel怎么集成Vue.js_Laravel Mix配置Vue开发环境  高防服务器如何保障网站安全无虞？  哪家制作企业网站好,开办像阿里巴巴那样的网络公司和网站要怎么做？  Laravel怎么使用Collection集合方法_Laravel数组操作高级函数pluck与map【手册】  如何快速完成中国万网建站详细流程？  微信小程序 HTTPS报错整理常见问题及解决方案  C++时间戳转换成日期时间的步骤和示例代码  深圳网站制作培训,深圳哪些招聘网站比较好？  Python制作简易注册登录系统  Laravel怎么实现API接口鉴权_Laravel Sanctum令牌生成与请求验证【教程】  Laravel请求验证怎么写_Laravel Validator自定义表单验证规则教程  php结合redis实现高并发下的抢购、秒杀功能的实例  Android利用动画实现背景逐渐变暗  制作电商网页,电商供应链怎么做？  Laravel怎么上传文件_Laravel图片上传及存储配置  详解Android图表 MPAndroidChart折线图  微信小程序 闭包写法详细介绍  Midjourney怎么调整光影效果_Midjourney光影调整方法【指南】  ChatGPT怎么生成Excel公式_ChatGPT公式生成方法【指南】  网站制作壁纸教程视频,电脑壁纸网站？  米侠浏览器网页图片不显示怎么办 米侠图片加载修复  西安专业网站制作公司有哪些,陕西省建行官方网站？  Laravel如何生成和使用数据填充？（Seeder和Factory示例）  移动端手机网站制作软件,掌上时代，移动端网站的谷歌SEO该如何做？  北京的网站制作公司有哪些,哪个视频网站最好？  Linux系统运维自动化项目教程_Ansible批量管理实战  JavaScript Ajax实现异步通信  Laravel如何处理异常和错误？（Handler示例）  HTML5空格和nbsp有啥关系_nbsp的作用及使用场景【说明】  手机钓鱼网站怎么制作视频,怎样拦截钓鱼网站。怎么办？  Edge浏览器如何截图和滚动截图_微软Edge网页捕获功能使用教程【技巧】  原生JS获取元素集合的子元素宽度实例  网站制作报价单模板图片,小松挖机官方网站报价？  如何在HTML表单中获取用户输入并结合JavaScript动态控制复利计算循环  打开php文件提示内存不足_怎么调整php内存限制【解决方案】  HTML透明颜色代码怎么让图片透明_给img元素加透明色的技巧【方法】  Gemini怎么用新功能实时问答_Gemini实时问答使用【步骤】  如何在宝塔面板创建新站点？  javascript中的try catch异常捕获机制用法分析