sessionstorage在多步骤表单中是会话期内的临时草稿纸，核心逻辑为实时存（监听input事件、精准选取字段、json存入带步骤标识的key）、自动取（domcontentloaded时主动恢复、try-catch解析、兜底赋值）、分步管（下一步保存当前步、上一步读取对应key、提交后清除相关key）。
sessionStorage 在多步骤表单中不是“备用硬盘”，而是“会话期内的临时草稿纸”——它不跨标签页、不持久化、不发请求，专为防刷新丢失而生。核心逻辑就三点：实时存、自动取、分步管。
每步输入后立即保存，不等点击再动
别把保存动作绑在「下一步」按钮上，那会漏掉最后几秒输入。应监听 input 事件（兼容性好、响应快），只采集当前步骤可见字段：
- 限定范围：用
.step-2 input, .step-2 select, .step-2 textarea, .step-2 [type="checkbox"], .step-2 [type="radio"]精准选取 - 按控件类型取值：文本类取
.value；复选框/单选框取.checked；下拉框优先用.value（而非.selectedIndex） - 组装对象后
JSON.stringify()存入，key 命名为form_step2这类带步骤标识的唯一名称 - 避免轮询或 debounce 延迟——input 事件天然适合高频更新，且不会卡顿
页面加载时主动恢复，不是等用户返回才动
在 DOMContentLoaded 阶段就检查 sessionStorage，而不是等用户点「上一步」才读数据：
- 用
sessionStorage.getItem('form_step2')获取原始字符串 - 加
try...catch包裹JSON.parse()，防止损坏数据导致脚本中断 - 字段赋值做兜底：
data.email ?? ''；禁用控件先启用再赋值，还原后再设回disabled - 复选框/单选框必须显式设置
.checked = true/false，仅设.value无效
步骤跳转与清理要边界清晰
不同操作对应不同存储策略，避免覆盖或残留：
- 点「下一步」：保存当前步（如
form_step2），前几步（form_step1）保留不动 - 点「上一步」：直接读取对应 key 数据并回填，无需判断流程状态或发起请求
- 提交成功后：逐个清除
sessionStorage.removeItem('form_step1')，或批量删除所有form_step*key - 用户点「重新开始」或「放弃」：立即清空全部相关 key，不依赖标签页关闭自动清理
注意实际项目中的关键细节
这些点不写进代码里，但一出错就卡住体验：
- 同源限制严格：a.example.com 和 b.example.com 无法共享 sessionStorage
- 隐私模式需降级提示：部分浏览器在无痕模式下禁用或重置 sessionStorage，可加提示语：“当前处于无痕模式，刷新后数据将丢失”
- 敏感字段绝不明文存：密码、身份证号等禁止写入，哪怕只是临时暂存
- 不监听 storage 事件同步状态：该事件在当前页不触发，只通知同源其他页面，对多步骤流程无用
