跨表单提交的状态管理需用 Map + CustomEvent 实现轻量状态桥接，避免 localStorage 缺陷；PHP 配合时须扁平化键名、禁用默认刷新、动态携带 CSRF token，并明确状态归属权。
跨表单提交的状态管理，本质是解决「用户在多个独立 <form></form> 中操作后，如何让彼此感知并协同更新状态」的问题。它不是靠单个表单的 submit 事件就能闭环的，必须引入外部状态容器和显式同步机制。
为什么不能只靠 localStorage 或 sessionStorage？
很多人第一反应是存到 localStorage，但实际踩坑点很集中：
- 不同表单可能运行在不同页面、甚至不同 tab，
storage事件监听不可靠（比如页面未激活时收不到） - 表单字段名冲突：两个表单都用
userEmail键，但语义完全不同，覆盖即丢数据 - 没有生命周期控制：用户离开页面后残留脏数据，下次进来直接污染初始值
-
JSON.stringify()无法序列化File、Date、RegExp等类型，多文件上传或时间选择器会静默失败
推荐方案：用 Map + CustomEvent 做轻量状态桥接
不依赖框架，纯原生 JS 即可落地。核心是把状态从 DOM 解耦出来，由一个中心 Map 托管，并通过自定义事件广播变更：
- 每个表单初始化时调用
registerForm('profile-form', { fields: ['name', 'email'] })，注册唯一 ID 和关心的字段列表 - 表单内输入时，触发
input或change事件，自动写入stateMap.set('profile-form:name', value) - 另一表单如
settings-form监听form-state-update事件，收到后检查是否含自己关心的键（如profile-form:email），再做 DOM 同步或校验 - 页面卸载前调用
cleanupForm('profile-form')，从Map中清除对应前缀的所有条目
示例片段：
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
立即学习“前端免费学习笔记（深入）”；
const stateMap = new Map();
function registerForm(id, config) {
config.fields.forEach(field => {
const key = `${id}:${field}`;
stateMap.set(key, document.querySelector(`[name="${field}"]`)?.value || '');
});
}
document.addEventListener('form-state-update', e => {
if (e.detail?.sourceId === 'profile-form') {
const email = stateMap.get('profile-form:email');
document.getElementById('email-preview').textContent = email;
}
});
PHP 后端配合时的关键约束
如果表单最终要提交给 PHP，注意三点硬性限制：
- 不要在前端用
$_SESSION键名直译为 JS 变量名（如$_SESSION['user']['phone']→user.phone），PHP 的嵌套数组在 JS 中需扁平化为user_phone这类下划线命名，否则 JSON 传输易出错 - PHP 表单提交默认是全量刷新，若需局部状态同步，必须加
event.preventDefault()并改用fetch提交，否则 JS 状态会被页面重载清空 - CSRF token 必须随每次跨表单操作一起携带——不能只存在第一个表单的 hidden input 里，要用
document.querySelector('[name="csrf_token"]').value动态读取并注入后续请求
最常被忽略的是「状态归属权」：谁创建、谁清理。一个表单注册了 profile-form，就不能指望另一个表单来销毁它。Map 的 key 命名必须带作用域前缀，且 cleanup 必须在 beforeunload 或路由离开钩子中显式触发，否则内存泄漏和跨用户数据污染风险极高。
