可使用 sessionStorage 在页面跳转前后自动存取搜索关键词并恢复输入内容：跳转前存入（如用 beforeRouteLeave 或 useEffect），返回后读取并填充搜索框，建议加业务前缀、JSON 序列化对象、try-catch 解析、及时清理。
可以在页面跳转前后用 sessionStorage 自动存取搜索关键词，让返回时自动恢复输入内容，无需刷新或重新提交。
导航前保存关键词
用户在列表页输入搜索词并触发跳转（如点击详情、切换路由）时，立即把关键词存入 sessionStorage：
- 监听表单提交、按钮点击或路由守卫（如 Vue Router 的 beforeRouteLeave、React Router 的 useNavigate 配合 useEffect 清理）
- 使用 sessionStorage.setItem('search-keyword', keyword) 存储，建议加业务前缀避免冲突，例如 'list-search-draft'
- 若关键词含空格、特殊符号，无需额外编码——setItem 会自动处理字符串；但注意它只接受字符串，传对象需先 JSON.stringify()
返回后自动恢复
列表页组件重新挂载或激活时，优先从 sessionStorage 尝试读取并填充：
Session Handoff
下载
创建全面的交接文档，使新AI代理能够无缝继续工作，消除歧义。解决上下文耗尽问题。 时机：(1)用户请求保存交接，(2)上下文即将满，(3)主要任务完成，(4)会话结束，(5)恢复工作时。 关键词：保存状态、创建交接、上下文已满、暂停、从...恢复、加载交接、保存进度、会话转移、交接
- 在组件初始化逻辑中调用 sessionStorage.getItem('list-search-draft')
- 若返回值不为 null，就赋值给搜索框的 value 或绑定数据，并触发一次搜索（可选）
- 恢复后建议立刻 removeItem('list-search-draft')，防止重复恢复或残留脏数据；如需保留至流程结束，也可延后清除
配合分页与筛选状态更完整
仅存关键词不够？实际场景中常需同步页码、每页条数、分类选项等：
立即学习“前端免费学习笔记（深入）”；
- 将多个字段合并为一个对象，如 { keyword: '张三', page: 2, size: 10, category: 'active' }
- 用 JSON.stringify() 存入 sessionStorage，键名统一管理，例如 'list-state-cache'
- 恢复时用 JSON.parse() 解析，再分别赋值；注意加 try-catch 防止解析失败导致白屏
注意边界与安全细节
sessionStorage 不是万能胶，用对地方才稳定：
- 它不会跨标签页共享——新打开的列表页无法读取原页存的关键词，这是设计使然，不是 bug
- 关闭标签页即清空，所以不适合做持久化；需要书签分享或 SEO，请仍用 URL query 参数
- 不存储敏感信息（如身份证号、手机号），因其易受 XSS 攻击读取
- 存前检查长度，避免超浏览器配额（通常 5–10MB），单个关键词一般无压力
