localStorage长期存储且同源共享，sessionStorage仅限当前标签页会话；二者均仅支持字符串、容量约5MB、不参与HTTP请求。

JavaScript 中的本地存储主要靠 localStorage 和 sessionStorage 实现，它们都提供键值对形式的浏览器端数据持久化能力，但生命周期和作用域完全不同。

localStorage：长期保存，跨窗口共享

数据写入后会一直保留在浏览器中，除非手动清除（比如调用 localStorage.clear() 或用户主动删除浏览数据）。同一域名下的所有标签页、窗口都能读写同一份数据。

• 适合存用户偏好设置、主题选择、免登录 Token（注意安全性）等需要长期记住的信息
• 写法示例：localStorage.setItem('theme', 'dark')；读取：localStorage.getItem('theme')
• 只支持字符串，存对象需先 JSON.stringify()，读取时再 JSON.parse()

sessionStorage：仅限当前会话，页面关闭即失效

数据只在当前浏览器标签页（或窗口）中有效，刷新页面保留，但关闭该标签页后自动清空。不同标签页之间互不干扰，即使同域名也各自独立。

• 适合临时状态，比如表单草稿、多步骤流程中的中间数据、防重复提交的标记
• 写法与 localStorage 完全一致：sessionStorage.setItem('draft', 'hello world')
• 同样只接受字符串，对象需序列化处理

关键区别总结

• 有效期：localStorage 永久（除非手动删），sessionStorage 仅当前标签页生命周期
• 共享范围：localStorage 同源下所有窗口/标签页共享；sessionStorage 仅当前标签页独有
• 容量限制：两者通常都是 5MB 左右（具体取决于浏览器），远大于 Cookie 的 4KB
• 是否随请求发送：都不参与 HTTP 请求，完全由 JS 控制，不像 Cookie 那样自动附加到每个请求头

使用时要注意什么

• 敏感信息（如密码、完整 Token）不要直接存在 localStorage，容易被 XSS 攻击窃取
• 存储前检查是否可用（部分隐私模式或禁用 JS 的环境可能不可用）：if (typeof localStorage !== 'undefined') { ... }
• 监听存储变化可使用 storage 事件，但它只在其他同源窗口触发修改时才生效，当前窗口改不会触发自己
• 避免频繁读写大量数据，可能影响性能；大对象建议压缩或分片