跨表单提交需手动聚合多页数据至localStorage，统一键名、强制序列化、拦截默认提交；动态字段用name="xxx[]"语法，新增行用克隆，删除行须移除DOM节点，并实现超时清理机制。
跨表单提交不是指“一个表单提交到多个地址”，而是指用户在多个 HTML 页面间填写数据，最终一次性提交——这需要手动聚合、存储和传递，浏览器原生 <form></form> 不支持跨页提交。
为什么不能直接用多个 form 的 action 分别指向不同接口
每个 <form></form> 提交都会触发页面跳转或刷新，前一个表单的数据在跳转后就丢失了；即使用 target="_blank" 或 fetch 模拟提交，也得自己维护状态，否则后端收不到完整上下文。
- 浏览器不保存跨页面的表单 DOM 状态，
document.forms只存在于当前页面 -
localStorage是唯一可行的客户端持久化载体，但必须手动序列化、校验、清理 - 如果用
sessionStorage，关闭标签页即清空，不适合多步流程
用 localStorage 聚合多页表单数据的关键写法
核心是统一键名、强制序列化、拦截默认提交。不要存原始 DOM 元素，只存干净对象。
- 每页提交时，先
event.preventDefault()，再读取所有input[name]的值 - 用
JSON.stringify()包一层再存进localStorage.setItem('form-data', ...)，避免类型丢失 - 字段名必须一致（比如都叫
username、email），否则合并时会覆盖或漏项 - 最后一页读取时，用
JSON.parse(localStorage.getItem('form-data') || '{}')，并做空值判断
动态字段（如增删行）提交时 name 必须用 [] 语法
如果你在某页加了“添加联系人”按钮，生成了多组输入框，name 写成 contacts[] 才能被后端解析为数组；写成 contacts[0]、contacts[1] 会导致稀疏索引或解析失败。
立即学习“前端免费学习笔记（深入）”；
- 新增行必须用
<template></template>克隆，不能靠querySelectorAll().length拼索引 - 删除行必须调用
element.remove()或parentNode.removeChild()，只清空value还是会提交空字符串 - 提交前遍历所有
input[name="contacts[]"]，过滤掉空值，再塞进主数据对象
真正容易被忽略的不是怎么存，而是什么时候删——用户中途放弃流程，localStorage 里的脏数据不会自动过期；上线后得加个「超时清理」逻辑，比如存入时记时间戳，读取时检查是否超过 24 小时。
