sessionStorage 适合存多步骤表单状态，但仅限单次会话内未完成的草稿；它不跨标签页同步、关闭浏览器即清空、不触发 StorageEvent，比 localStorage 更干净。
sessionStorage 适合存多步骤表单状态吗？
适合，但仅限「单次会话内未完成的草稿」。它不跨标签页同步，关掉浏览器就清空，也不触发 StorageEvent（除非同源其他页面显式调用 sessionStorage.setItem），这点和 localStorage 有本质区别。如果你需要恢复上次未提交的填写内容，又不希望它长期残留，sessionStorage 是更干净的选择。
怎么把每一步表单数据结构化存进去？
别直接存原始 DOM 值或拼接字符串。应该统一为对象，按步骤 key 分层，例如：step1、step2。每次离开当前步（比如点击“下一步”）时，把该步所有字段收集为一个扁平对象，再用 JSON.stringify 存入 sessionStorage。注意过滤掉空值或默认值，避免污染后续判断。
示例：
// 收集 step2 字段
const step2Data = {
email: document.getElementById('email').value.trim(),
phone: document.getElementById('phone').value.trim(),
agree: document.getElementById('agree').checked
};
sessionStorage.setItem('form_step2', JSON.stringify(step2Data));
关键点：
- 每个步骤用独立 key（如
form_step1），避免覆盖 - 存前做
JSON.stringify，取时必须JSON.parse并加try/catch - 不要存函数、DOM 节点、Date 对象等无法序列化的值
用户刷新页面后如何自动恢复？
在每一步组件挂载或表单初始化时，立刻检查对应 key 是否存在，并尝试还原。不是等用户点“上一步”才恢复——那是体验断层。重点是：还原后要同步更新 React/Vue 状态或原生表单元素的 value 和 checked 属性。
常见错误：
- 只还原了状态变量，但没触发表单控件的视图更新（尤其原生 JS 场景下容易漏掉
input.value = xxx） - 还原时没处理
null或undefined，导致JSON.parse报错SyntaxError: Unexpected token u in JSON at position 0 - 多个步骤共用同一个 key，导致后存的覆盖先存的
安全读取写法：
function getStepData(stepKey) {
const raw = sessionStorage.getItem(`form_${stepKey}`);
if (!raw) return {};
try {
return JSON.parse(raw);
} catch (e) {
console.warn(`Invalid JSON in sessionStorage for ${stepKey}`, e);
return {};
}
}
// 使用
const saved = getStepData('step2');
if (saved.email) document.getElementById('email').value = saved.email;
if ('agree' in saved) document.getElementById('agree').checked = saved.agree;
什么时候该清除 sessionStorage？
成功提交后必须清空，否则下次打开表单仍会恢复旧数据。但不能只删某个 step key，要批量清理所有相关项。建议用前缀统一管理，比如全以 form_ 开头，然后遍历 keys 清理。
更稳妥的做法是：提交成功后调用 sessionStorage.removeItem 明确删掉每个已知 key，而不是依赖 sessionStorage.clear()——后者可能误删其他模块写入的内容。
容易被忽略的点：
- 用户中途放弃填写，但没主动退出（比如切走再回来），此时
sessionStorage仍保留，下次进入还是恢复旧状态——这是预期行为，不是 bug - 如果表单支持「暂存并退出」，那就该换用
localStorage，并加时间戳判断是否过期 - 移动端微信内置浏览器对
sessionStorage的生命周期有时异常（比如后台切换后丢失），需额外 fallback 到内存缓存
