sessionstorage 在页面刷新后数据不丢失是其设计特性，因生命周期绑定浏览器标签页会话；需在页面加载时主动读取、解析并同步至 ui 状态，且每次修改应及时写入。
sessionStorage 在页面刷新后数据天然不丢失——这不是需要“修复”的问题，而是它本来的设计行为。关键在于你有没有在刷新后正确读取、还原并同步到界面。
为什么刷新后数据还在
sessionStorage 的生命周期绑定的是“浏览器标签页会话”，不是单个 HTML 页面。只要这个标签页没被关闭，以下操作都不会清空数据：
- F5 或 Ctrl+R 手动刷新
- 地址栏输入回车跳转（同源）
- JavaScript 调用 location.reload()
- 使用 history.pushState() 或 replaceState() 导航
刷新后如何让数据“显示出来”
数据虽在，但 JavaScript 变量和 UI 状态不会自动更新。必须在页面加载时主动恢复：
- 监听 DOMContentLoaded 或组件挂载钩子（如 Vue 的 onMounted、React 的 useEffect(() => {}, [])）
- 用 sessionStorage.getItem('key') 获取值；注意返回 null 表示未存过，不是 undefined
- 若存的是对象或数组，需用 JSON.parse() 解析，建议加 try...catch 防止格式异常中断脚本
- 将解析结果赋给响应式状态（如 ref、useState），触发 UI 更新
- 服务端渲染（SSR）环境下，先判断 typeof window !== 'undefined' 再操作
每次修改都要及时写入
只读不写，或只写不读，都会导致界面与存储不同步：
- 用户输入、勾选、切换步骤时，立即调用 sessionStorage.setItem()
- 推荐封装一个 saveToSession(key, value) 函数，内部统一处理 JSON.stringify() 和异常捕获
- 避免等到表单提交才保存——意外刷新会让中间输入全部消失
- 对 checkbox、radio、select 等控件，要按类型取值（如 el.checked、el.value、Array.from(el.selectedOptions).map(o => o.value)）
注意多标签页互不影响
同一网站打开多个标签页，每个都有独立的 sessionStorage：
- Tab A 存了 'cart': '[{"id":1}]'，Tab B 中 getItem('cart') 仍为 null
- 右键“在新标签页中打开”，或用 window.open()，都会创建全新会话，不继承原数据
- 这不是缺陷，而是设计目的：适合管理单页临时状态，比如表单草稿、多步骤进度、当前会话 ID
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
