选 sessionstorage 还是 localstorage，关键看数据“活多久”和“在哪用”：sessionstorage 仅限单标签页、关闭即清空；localstorage 跨标签页持久保存、需手动清除。
选 sessionStorage 还是 localStorage，关键看数据“活多久”和“在哪用”。两者 API 一样、容量相近（约 5MB）、都只存字符串，但生命周期和作用域的差异直接决定它们在实际项目中能不能用对地方。
数据是否需要跨标签页共享
localStorage 的数据在同源的所有标签页和窗口间自动同步。比如用户在一个标签页里切换了主题为深色，另一个已打开的同域名页面刷新后也能读到 localStorage.getItem('theme') 并应用样式。sessionStorage 则完全隔离——每个标签页拥有独立副本，A 标签页存的表单草稿，B 标签页根本读不到，关掉 A 就彻底消失。
- 需要多窗口协同（如后台管理系统的多个工作台）→ 用 localStorage
- 希望各标签页互不干扰（如不同商品详情页的临时筛选状态）→ 用 sessionStorage
数据是否必须在关闭浏览器后依然存在
sessionStorage 是“会话级”的：只要标签页没关，哪怕刷新、跳转路由、甚至崩溃后恢复页面，数据都在；但一旦标签页关闭（包括意外崩溃后重启），所有内容清空。localStorage 没有自动过期机制，数据会一直留在磁盘上，重启浏览器、重装系统（除非清缓存）都不影响。
- 保存登录态令牌（需配合服务端验证）或用户长期偏好（语言、字体大小）→ localStorage 更稳妥
- 记录单次流程中的中间状态（如分步注册的第2步填写内容、未提交的编辑草稿）→ sessionStorage 更安全，避免残留敏感信息
是否涉及敏感信息与清理成本
两者都不随请求发往服务器，比 cookie 安全，但仍有风险：如果页面存在 XSS 漏洞，攻击者可直接读取并窃取其中数据。localStorage 因长期存在，风险窗口更长；sessionStorage 虽生命周期短，但若存储了临时 token 或身份证号片段，仍需警惕。
- 存用户手机号、邮箱等半敏感字段 → 优先 sessionStorage，且页面卸载前主动
removeItem - 存加密后的用户设置（如 theme、layout）→ localStorage 可接受，但避免明文存密码或 token
- 批量操作后记得及时清理：不用
clear()全清，而是按 key 精确移除，防止误删其他模块数据
是否需要监听数据变更
localStorage 支持 storage 事件，当同一域名下**其他标签页**修改了 localStorage 时，当前页能收到通知。sessionStorage 不触发该事件，因为它本就不跨标签页。
- 实现“多标签页登出同步”：一个标签页点击退出，其他标签页监听到 localStorage 变化后自动跳转登录页 → 依赖 localStorage + storage 事件
- 单页内状态联动（如弹窗组件与主内容区通信）→ 不用 storage 事件，改用 Context 或事件总线更直接
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
