sessionstorage 是表单自动保存最轻量、最匹配的本地存储方案：它不跨标签页、刷新不丢、关页即清，天然适配“填一半怕刷新”的真实场景。
SessionStorage 是表单自动保存最轻量、最匹配的本地存储方案：它不跨标签页、刷新不丢、关页即清，天然适配“填一半怕刷新”的真实场景。用得好，用户几乎感觉不到数据在背后流动；用得糙，可能存错、漏恢复、甚至泄露敏感信息。
实时存：输入即存，别等点击或失焦
监听 input 事件（不是 change 或 blur），确保每次打字、勾选、切换下拉都触发保存：
- 只采集当前可见步骤的字段，比如
.step-2 input, .step-2 select, .step-2 [type="checkbox"] - 文本类取
.value，复选框/单选框取.checked，下拉框优先用.value（兼容性更好） - 组装成对象后用
JSON.stringify()存入，key 命名为form_step2这类带步骤标识的名称 - 避免轮询、防抖或定时保存——input 事件足够快且覆盖所有交互类型
自动取：页面一加载就恢复，不等用户操作
在 DOMContentLoaded 阶段立即读取并回填，让用户打开页面就像没离开过：
- 用
sessionStorage.getItem('form_step2')获取原始字符串 - 用
try...catch包裹JSON.parse()，防止因损坏数据导致脚本中断 - 字段赋值前做空值兜底，例如
data.phone ?? '' - 复选框/单选框必须显式设置
.checked = true/false，不能只设 value - 禁用字段（
disabled）先临时启用再赋值，完成后还原状态
分步管：跳转逻辑清晰，存删边界分明
不同操作对应不同存储行为，避免覆盖或残留：
- 点「下一步」：只保存当前步（如
form_step3），保留前面所有步骤数据 - 点「上一步」：直接读取对应 key（如
form_step2）并回填，无需额外判断流程状态 - 提交成功后：批量清除所有
form_step*key，或逐个removeItem - 用户点「放弃」或「重新开始」：立即清空相关 key，不依赖标签页关闭
防踩坑：同源、隐私模式与敏感字段处理
这些细节不显眼，但直接影响功能是否稳定可用：
- 子域名不同（如
a.example.com和b.example.com）无法共享 sessionStorage，需确认部署域名一致性 - 无痕/隐私模式下部分浏览器会禁用或重置 sessionStorage，可加提示：“当前处于无痕模式，刷新后数据将丢失”
- 身份证号、银行卡号、密码等字段一律跳过存储——sessionStorage 不是保险箱，临时也不建议
- 移动端 Safari 在后台一段时间后可能提前清空 sessionStorage，关键字段仍需服务端兜底
