如何通过HTML构建具备状态缓存的表单组件-html教程-PHP中文网

formdata拿不到上一步字段值是因为它只采集当前dom中实际存在且未disabled的input元素；多步骤表单需用hidden input动态补全，并配合唯一flowid隔离localstorage键。

如何通过html构建具备状态缓存的表单组件

new FormData() 为什么拿不到上一步的字段值

因为 FormData 只读取当前 DOM 中**实际存在且可提交**的 <input> 元素，未渲染、disabled 或被移除的字段一律忽略。多步骤表单中，上一步的 email 字段如果没出现在当前页面的 HTML 结构里，哪怕 URL 里带着 ?email=xxx，new FormData(form) 也完全采集不到。

这不是 JS 写错了，是浏览器表单语义决定的行为——FormData 绑定的是 DOM 树，不是 URL 或内存状态。

检查当前页面源码：若没有 <input name="email" type="hidden">，就不可能被提交
disabled 的字段即使存在 DOM 中，也会被 FormData 跳过
用 form.elements 或 form.querySelectorAll('input:not([disabled])') 可验证哪些字段实际参与采集

用 hidden input + URL 参数动态补全表单 DOM

最轻量、兼容性最好的做法：每步页面加载时，从 URL 解析参数，并为每个参数名创建或复用一个 <input type="hidden"> 插入到表单内。这样 FormData 就能自然捕获全部字段。

关键点在于避免重复插入和残留旧值：

先清理已有同名 hidden 字段：form.querySelectorAll('input[name="xxx"][type="hidden"]') → .forEach(el => el.remove())
用 new URL(window.location.href).searchParams 安全读取参数，不依赖正则或 split('&')
对每个 [key, value]，创建 input 并设置 name 和 value，再 form.appendChild(hidden)
注意 name 值需符合 HTML 属性命名规范（不能含空格、特殊符号），否则 FormData 可能漏采

localStorage 存完整快照时怎么避免覆盖冲突

用固定键名如 'multiStepForm' 存数据，多个用户/多个流程会互相覆盖。必须引入唯一上下文标识，否则 A 用户填到第三步刷新，B 用户刚进第一步，两人共用同一份 localStorage，状态直接错乱。

Doc To HTML

使用 MinerU 文档处理引擎将 Word 文档（.doc、.docx）转换为保留结构和格式的干净 HTML。

下载

推荐两种生成唯一键前缀的方式：

从初始 URL 提取 flowId 参数：new URL(document.referrer).searchParams.get('flowId')，适用于跳转链明确的场景
用 sessionStorage 生成临时 ID：sessionStorage.getItem('formSessionId') || Math.random().toString(36).substr(2, 9)，然后存入 sessionStorage 保证本 tab 内唯一
每次跳转前调用：localStorage.setItem('form_' + flowId, JSON.stringify(currentData))，不是 += 或 push
读取时做 JSON 解析容错：try { return JSON.parse(localStorage.getItem(key)) || {} } catch(e) { return {} }