sessionstorage暂存多步骤表单需实时存、自动取、分步管：每步输入后立即保存当前字段，页面加载时主动恢复；点击下一步保存当前步、上一步读取对应key；提交成功或放弃时清除相关key；注意同源限制、隐私模式降级、敏感字段不存储及spa中手动恢复。
用 sessionStorage 暂存多步骤复杂表单，关键在于「实时存、自动取、分步管」。它不跨标签页、不持久化、不发请求，正好匹配“填一半怕刷新”的真实场景。
每步输入后立即保存，别等最后
监听 input 事件（非 submit 或 click），对当前步骤所有字段实时采集并序列化存储：
- 只处理当前步骤的控件，例如 .step-2 input, .step-2 select, .step-2 textarea, .step-2 [type="checkbox"], .step-2 [type="radio"]
- 为每个字段生成键值对：文本类取 .value，复选框/单选框取 .checked，下拉框注意 .selectedIndex 或 .value
- 组装成对象后用 JSON.stringify() 存入，key 命名为 form_step2 这类带步骤标识的唯一名
- 避免轮询或延迟保存——input 事件足够快且兼容性好，用户打字、勾选、切换选项都能捕获
页面加载时主动恢复，不是等用户点返回
在 DOMContentLoaded 阶段就检查对应步骤的 sessionStorage 数据，并完成视图同步：
- 先用 sessionStorage.getItem('form_step2') 获取原始字符串
- 加 try...catch 包裹 JSON.parse()，防止因异常字符串导致脚本中断
- 对每个字段做空值判断：比如 data.email ?? ''，再赋给 input.value
- 复选框/单选框需显式设置 .checked = true/false，不能只设 value
- 若字段是禁用状态（disabled），恢复前先临时启用，赋值后再还原
步骤跳转与清理要分清边界
不同操作对应不同存储策略，避免覆盖或残留：
- 点击「下一步」：保存当前步数据（如 form_step2），保留前几步（form_step1）不删
- 点击「上一步」：直接读取对应 key 的数据并回填，无需额外请求或判断流程状态
- 最终提交成功后：调用 sessionStorage.removeItem('form_step1') 等逐个清除，或用循环批量删除带 form_step 前缀的项
- 用户主动点击「重新开始」或「放弃填写」：立即清空全部相关 key，不依赖标签页关闭自动清理
注意边界情况和安全细节
实际项目中容易忽略但影响体验的关键点：
- 同源限制必须满足——子域名不同（如 a.example.com 和 b.example.com）无法共享 sessionStorage
- 隐私模式下部分浏览器会禁用或重置 sessionStorage，可加降级提示：“当前处于无痕模式，刷新后数据将丢失”
- 敏感字段（如身份证号、银行卡号）不要存入，即使临时也不建议；密码类字段一律跳过存储
- 移动端 Safari 在后台运行超时可能提前清空 sessionStorage，关键步骤建议服务端也存一份草稿
- 单页应用（SPA）中，若路由切换不触发页面重载，需在组件挂载/激活时手动执行恢复逻辑
