sessionstorage锁定表单步进状态的核心是将currentstep和formdata作为唯一可信源，每次进入页面时强制跳转至存储步骤并恢复数据，所有导航和渲染均以此为准。
用 sessionStorage 锁定单个会话内的表单步进状态，核心是**在用户未完成流程前，持久化当前步骤、已填数据和禁止后退/跳步的约束逻辑**，且仅限当前浏览器标签页生效。
只在当前会话中保存并校验步骤位置
sessionStorage 天然满足“单会话”要求：关闭标签页即清空，新开标签页互不干扰。关键不是单纯存值，而是每次进入表单页面时主动读取并强制跳转到已保存的步骤。
- 进入表单任意路由（如
/form/step2）时，先从sessionStorage.getItem('currentStep')读取真实进度 - 若存储值为
"step3"，但当前 URL 是step2，则用history.replaceState或router.replace重定向到step3 - 避免用户手动修改 URL 跳过校验——这一步才是“锁定”的实质
写入时机要覆盖所有可能的步骤变更路径
不能只在点击“下一步”时存，否则刷新或意外离开会导致状态丢失。需统一入口：
- 调用
goToStep(stepKey)函数跳转时，同步执行sessionStorage.setItem('currentStep', stepKey) - 表单组件
mounted或useEffect中检查当前步骤是否匹配存储值，不匹配则修正 - 监听
beforeunload可选补充：确保关闭前至少存一次最新步（但sessionStorage本身已自动持久化至标签页生命周期结束）
结合数据与状态做原子性更新
仅存步骤名不够安全。例如用户填了 step2 的字段但没点下一步，直接关页再打开，应恢复到 step2 且保留已输内容。
- 每次切换步骤前，把当前步骤的表单字段序列化为对象，存入
sessionStorage.setItem('formData', JSON.stringify(data)) - 读取时用
JSON.parse()恢复，并按currentStep映射到对应字段（避免全部渲染） - 可合并存储：
sessionStorage.setItem('formState', JSON.stringify({ currentStep: 'step2', data: { name: '张三' } }))，读写更原子
退出时清理或保留取决于业务意图
“锁定”不等于“永不释放”。需明确完成或放弃时的行为：
- 提交成功后，调用
sessionStorage.removeItem('formState')，防止残留脏数据 - 用户点击“放弃填写”，同样清除；若允许暂存草稿，则不删，下次进入自动续填
- 不要依赖
sessionStorage的自动清理——主动控制更可靠
不复杂但容易忽略：锁定的本质是**用存储值作为唯一可信源，所有导航和渲染都以它为准，而非 URL 或组件内部 state**。
