17370845950

sessionStorage和localStorage生命周期与共享范围不同：前者仅限当前标签页会话，关闭即清空；后者持久存储，除非手动清除。适用场景上，前者适合临时数据如表单草稿，后者适合长期偏好如主题设置。

SessionStorage 和 localStorage 都是浏览器提供的 Web Storage API，用于在前端本地存键值对数据，但它们的“存活时间”和“共享范围”完全不同——选错一个，轻则数据丢失，重则功能异常。

生命周期：关不关标签页，决定数据留不留

sessionStorage 的数据只属于当前标签页（或窗口）的一次会话。只要这个标签页一关闭，所有 sessionStorage 数据立刻清空，哪怕刷新页面、跳转路由、甚至页面崩溃后恢复，它都还在。但换一个同源标签页，就是全新的 sessionStorage，彼此完全隔离。

localStorage 则“记性好得多”：数据写进去后，除非你用 removeItem() 或 clear() 主动删，或者用户手动清除浏览器缓存，否则它会一直存在——关掉浏览器、重启电脑、隔几天再打开，数据原样不动。

适用场景：临时草稿 vs 长期偏好

sessionStorage 适合放“用完即弃”的东西：

• 多步骤表单中用户已填但还没提交的内容（防止刷新丢数据）
• 页面跳转时需要临时传递的参数（比如从列表页带筛选条件进详情页）
• 单页应用里某个流程的中间状态（如购物车暂存、编辑器未保存草稿）

localStorage 更适合“希望下次还记住”的配置类信息：

• 用户主题偏好（深色/浅色模式）、字号、语言选择
• 登录态标识（配合 token 使用，注意别存密码！）
• 高频静态资源缓存（如接口返回的分类列表、站点配置）

技术细节：API一样，但安全和容量要注意

两者 API 完全一致：setItem()、getItem()、removeItem()、clear()。但必须注意：

• 只能存字符串，对象要先 JSON.stringify()，取出来再 JSON.parse()
• 容量差不多，主流浏览器都支持约 5MB，远大于 Cookie 的 4KB
• 都受同源策略限制，不同域名/协议/端口之间完全不可见
• 数据明文存储，开发者工具里点开 Application 就能直接看到、修改——绝不能存密码、token（尤其未加密的）、身份证号等敏感信息

和 Cookie、Session 的关系不是一回事

别被名字误导：sessionStorage 和服务器端的 Session 没有直接关系；它只是浏览器自己的“会话级存储”，不发请求、不传服务器。Cookie 才是真正会随每次 HTTP 请求自动带到后端的机制，常用来传 session ID。而 localStorage/sessionStorage 纯属前端自用，不会增加网络开销。

基本上就这些。