sessionstorage 在 spa 路由切换中不丢失，因其生命周期绑定标签页而非页面实例；vue/react router 基于 history api，不重载 dom，数据完整保留，仅关闭标签页、clear() 或覆盖 key 时才清除。
SessionStorage 本身是页面级的，只要不关闭标签页，它在单页应用（SPA）的路由切换中天然保持不变——因为路由变化不触发页面刷新，sessionStorage 的生命周期不受影响。
为什么路由切换时 sessionStorage 没丢？
Vue Router、React Router 或 Angular Router 都基于 History API（如 pushState）实现前端跳转，整个过程 DOM 不重载，JS 执行环境持续存在。因此：
-
sessionStorage存储的数据仍保留在内存中，键值对完整保留 - 你随时可以通过
sessionStorage.getItem('key')读取，无需额外操作 - 只有用户关闭标签页、手动调用
sessionStorage.clear()或覆盖同名 key 时才会丢失
常见误判场景：什么情况下看似“丢了”？
实际不是 sessionStorage 失效，而是逻辑或时机问题：
-
路由守卫中过早清理：比如在
beforeEach里执行了sessionStorage.clear()或删了关键项 - 异步操作未等待完成：例如在导航前发起 API 请求并依赖响应写入 sessionStorage，但跳转太快导致写入被中断或覆盖
-
跨子域或 iframe 场景：不同源（如
app.example.comvsadmin.example.com）的 sessionStorage 彼此隔离，看起来像丢失 - 开发时硬刷新调试：F5 刷新会重建 sessionStorage，误以为路由切换导致清空
如何安全使用 sessionStorage 管理路由状态？
推荐按需封装读写逻辑，避免直接裸用：
- 用工具函数统一管理，比如
setAuthData(data)写入并自动加时间戳，getAuthData()校验有效期再返回 - 敏感信息（如 token）建议配合 HttpOnly Cookie 使用，
sessionStorage仅存非敏感标识或 UI 状态（如折叠菜单、搜索关键词） - 监听路由变化时，可主动同步部分状态（例如把当前 tab 名存入 sessionStorage），方便刷新后恢复
- 注意避免 key 冲突，建议加命名空间前缀，如
'myapp_user_info'
替代方案对比（按需选择）
如果需要更长生命周期或跨标签页共享，可考虑：
- localStorage：持久化存储，关闭标签页也不丢，但需手动清理过期数据
- URL 参数 + history.state：适合临时、轻量、可分享的状态（如分页参数、筛选条件）
-
全局状态管理（Pinia / Redux）：配合持久化插件（如
pinia-plugin-persistedstate）可选存到 sessionStorage - 内存变量（如 ref / useState）：最简单，但刷新即失，适合纯运行时中间态
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
