sessionstorage适合保存与当前路由强关联的临时状态数据，如未提交草稿id、分页参数、向导步骤、临时token；其特点是刷新不丢失、关闭标签即清除、天然隔离、无需后端参与。
单页面应用（SPA）中，sessionStorage 不直接保存“路由”本身，而是保存与当前路由行为强关联的临时状态数据，比如未提交的表单、多步流程位置、临时 ID 或筛选条件。它的价值在于：刷新不丢、关掉标签即清、天然隔离、无需后端参与。
适合存什么临时路由状态
sessionStorage 适合保存那些只在当前浏览会话中有效、且与某次导航行为紧密绑定的数据：
- 用户正在编辑但未提交的草稿 ID（如
draft_7f2a9e），用于跳转到 /editor 页面后加载对应内容 - 分页列表的当前页码、搜索关键词、排序字段——返回时自动恢复第 3 页带关键词的结果
- 向导式流程的步骤序号（如
step: 2）和已填字段，刷新后仍停留在步骤 2 - 临时权限会话 token（如
tempReviewToken），配合路由守卫控制能否进入 /review 页面
怎么安全地绑定到路由跳转
关键不是把 URL 存进去，而是用 sessionStorage 做“状态锚点”，让路由组件启动时主动读取并响应：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 触发跳转前：生成唯一标识（如 UUID），写入 sessionStorage：
sessionStorage.setItem('pendingDraftId', 'draft_xm9k3p') - 跳转目标设为统一占位路径（如
/temp-editor），不带参数，避免 URL 泄露或被手动篡改 - 在
/temp-editor组件的mounted（Vue）或useEffect（React）中读取：const id = sessionStorage.getItem('pendingDraftId') - 若读取为空，说明不是合法入口，应重定向（如
router.push('/')）或提示“会话已过期” - 成功加载后，可立即清除该 key，防止重复使用：
sessionStorage.removeItem('pendingDraftId')
配合路由守卫做状态一致性校验
防止用户手动输入临时路径绕过前置流程，需在导航阶段拦截检查：
- Vue Router 中，在
router.beforeEach里判断目标路由是否属于受保护临时页（如匹配/temp-*） - 若命中，检查必要 key 是否存在（如
sessionStorage.getItem('tempSessionKey')） - 缺失则
next('/')或自动调用初始化逻辑（如创建新草稿并写入 sessionStorage） - React Router 可在布局组件或自定义 Hook 中用
useLocation+useEffect实现类似逻辑
别踩这些坑
sessionStorage 很轻量，但误用会导致体验断裂或安全风险：
- ❌ 不要存敏感信息（如 token、密码片段），它不加密，XSS 攻击可直接读取
- ❌ 不要存大数据（如整页 HTML、大文件 base64），5MB 限制因浏览器而异，超限会静默失败
- ❌ 不要用它同步多个标签页的状态——每个标签页的 sessionStorage 完全独立
- ❌ 不要依赖它做持久化：关闭标签就没了，想“下次打开还在”得换 localStorage 或服务端存储
- ✅ 推荐加一层封装：比如
useSessionState('searchFilters')，自动处理 JSON 序列化/反序列化和错误捕获
