多步骤表单刷新后数据丢失的根本原因是FormData仅采集当前DOM中实际存在的可提交元素，未渲染字段（如上一步的email）不会被自动捕获；URL参数只是传递载体，不自动还原到表单控件，必须通过动态插入hidden input或localStorage持久化来确保状态延续。
多步骤表单刷新后数据丢失的根本原因
页面跳转时只传 URL 参数，但后续页面的 FormData 只读取当前 DOM 中存在的 <input> 元素——没渲染出来的字段（比如上一步的 email）根本不会被采集。这不是 JS 写错了，是 HTML 结构和表单语义本身决定的。
- URL 参数只是“传递载体”，不是“状态存储”，它不自动还原到表单控件上
-
new FormData(formElement)严格依赖 DOM 树中实际存在的可提交元素，disabled或未渲染的字段一律忽略 - 如果页面 B 的 HTML 没写
<input name="email" type="hidden">，哪怕 URL 里有?email=xxx，也拿不到值
用 hidden input + URL 参数同步填充 DOM
最轻量、兼容性最好的做法：在每一步页面加载时，从 URL 解析参数，并动态插入对应 <input type="hidden"> 到表单内。这样 FormData 就能自然捕获所有字段。
- 用
new URL(window.location.href).searchParams安全读取参数，避免手动解析字符串出错 - 对每个参数名，检查当前表单是否已有同名
<input>；没有就创建并 append 到form内部 - 注意重复插入风险：需先
form.querySelectorAll('input[name="xxx"]')清理旧 hidden 字段，再写入新值 - 示例关键逻辑：
const params = new URL(window.location.href).searchParams; for (const [key, value] of params) { const existing = form.querySelector(`input[name="${key}"]`); if (!existing || existing.type !== 'hidden') { const hidden = document.createElement('input'); hidden.type = 'hidden'; hidden.name = key; hidden.value = value; form.appendChild(hidden); } }
localStorage 存储比 URL 更可靠，但要防覆盖冲突
URL 参数易被篡改、长度受限（通常 2048 字符）、且无法跨 tab 共享；localStorage 适合存完整表单快照，但必须处理多步骤并发写入导致的状态错乱。
- 不要用固定键名如
'multiStepForm'—— 多个用户/多个流程会互相覆盖 - 推荐按流程 ID 区分：比如用
sessionStorage.getItem('formSessionId')生成唯一标识，或从初始 URL 提取flowId参数作为前缀 - 每次跳转前调用
localStorage.setItem('form_' + flowId, JSON.stringify(currentData))，而不是追加 - 读取时务必校验返回值：
const saved = localStorage.getItem('form_' + flowId); if (saved) { data = JSON.parse(saved); }，否则JSON.parse(null)会报错
DOM 树缓存 ≠ 直接保存 innerHTML
直接存 element.innerHTML 看似简单，但会丢事件监听器、破坏引用关系、且内联脚本不执行；真正需要缓存的是“可重建的结构描述”，不是渲染结果。
立即学习“前端免费学习笔记（深入）”；
- 对动态生成的表单项（如用户添加的地址块），应序列化为纯对象数组：
[{type: 'text', name: 'addr1', value: 'xxx'}, {type: 'select', name: 'country', value: 'CN'}] - 恢复时用
document.createElement()重建节点，再设value和checked，而非innerHTML = string - 避免存
data-*属性当状态容器——它只适合初始化标识，不适合存value或checked这类运行时状态 - 如果用了框架（如 React/Vue），别绕过其状态机制去操作 DOM；原生 JS 场景才需手动建模
