javascript如何存储数据_localStorage和sessionStorage有何不同

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]" 这种无意义字符串

基本上就这些。选哪个，核心就看“数据要不要跨页面/跨重启保留”。