跨表单提交不能靠单个form的submit事件监听，因其仅触发自身提交行为，无法捕获其他表单提交、按钮跳转、回车或JS调用requestSubmit()等场景，易导致数据遗漏、恢复不全或key冲突。
跨表单提交的自动暂存不能靠单个 form 的事件监听兜底，必须用统一 key 管理 + 显式字段映射 + 提交前合并还原。
为什么 submit 事件监听对跨表单无效
每个 form 元素的 submit 事件只在它自身被提交时触发。如果页面有多个表单（比如分步注册的 form#step1、form#step2），监听其中一个的 submit 不会捕获另一个的提交行为——更别说用户可能直接点按钮跳转、按回车、甚至用 JS 调用 form.requestSubmit()。
常见错误现象：
– 点了第二步的“下一步”按钮，第一步数据没存进去
– 切换标签页后回来，只有当前表单的数据恢复，其他步骤为空
– 多个表单共用同一组字段名（如都叫 email），localStorage key 冲突导致值互相覆盖
- 必须放弃“监听每个 form 的 submit”的思路，改用全局输入监听 + 显式表单标识
- 给每个
form加唯一data-form-key属性，例如data-form-key="signup-step1" - 所有输入事件（
input、change、blur）统一委托到document或父容器，再根据event.target.closest('form')找到所属表单
如何用 localStorage 统一管理多个表单字段
localStorage 只存字符串，但多个表单的字段结构不同、命名可能重复，直接拼 key 容易混乱。正确做法是：以 form 的 data-form-key 为根，字段名作为子路径，组合成嵌套对象再序列化。
示例结构：
localStorage.setItem('form_data', JSON.stringify({
'signup-step1': { name: '张三', email: 'z@x.com' },
'signup-step2': { phone: '138****1234', city: '杭州' }
}));
关键实操点：
- 读取时先
JSON.parse(localStorage.getItem('form_data')) || {}，避免null导致后续报错 - 写入前做浅比较：只更新值变化的字段，不全量覆盖，减少 I/O 和意外清空
- 对
input[type="checkbox"]和input[type="radio"]，存布尔值或数组，别存字符串"true"/"false" - 遇到
select[multiple]，用Array.from(el.selectedOptions).map(o => o.value)提取选中项
提交时怎么把多个表单数据合并发出去
最终提交不是某个表单的原生 submit，而是收集所有已暂存的表单数据，合成一个 payload 发给后端。这要求前端明确区分「暂存」和「终局提交」两个动作。
典型流程：
- 点击「提交全部」按钮时，调用
event.preventDefault()阻止默认跳转 - 从
localStorage.getItem('form_data')读出整个对象，用Object.values()合并为扁平数据，或保留结构传给后端（推荐后者，便于服务端校验分步完整性） - 合并时注意字段冲突：比如
signup-step1.email和signup-step2.email都存在，需业务层决定是否覆盖或报错 - 提交成功后，调用
localStorage.removeItem('form_data')，而不是逐个删signup-step1这类 key——避免漏删
容易被忽略的软键盘与 visibilitychange 时机问题
移动端软键盘弹出会触发 resize 和 scroll，但不会触发 visibilitychange；而用户切到其他 App 再切回来，visibilitychange 会触发，但此时 DOM 可能尚未重绘完成，直接读 input.value 可能拿到旧值。
稳妥做法：
- 监听
document.addEventListener('visibilitychange', () => { if (document.visibilityState === 'hidden') setTimeout(() => saveAllForms(), 300); }) - 对
textarea 和带富文本的contenteditable区域，额外监听blur，因为input事件在软键盘收起前可能不触发 - 不要依赖
navigator.onLine判断是否该暂存——离线时更要存，否则用户填完发现没网，连本地备份都没有
最复杂的不是怎么存，是怎么判断「该不该存」：字段是否有效、是否被禁用、是否属于当前活跃步骤、是否刚被后端返回过冲突校验结果……这些边界条件一旦漏掉，就会出现“看着存了，其实没存”或者“存了却恢复不出来”的静默失败。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
