跨表单提交后 input 值刷新即空，因原生提交会重载页面导致 DOM 重建、运行时值丢失；应通过 input 事件实时存入 localStorage 并在 DOM 加载后回填，注意分片存储、敏感字段不缓存、异常降级处理。
跨表单提交时 input 值为什么一刷新就空了
浏览器原生表单提交（form.submit() 或点击 <button type="submit"></button>）会触发页面跳转或重载，DOM 完全重建，所有未持久化的用户输入都会丢失。这不是 bug，是 HTML 规范行为——input.value 是运行时属性，不参与 HTML 序列化，刷新后只能靠服务端回填或前端主动恢复。
用 localStorage 实时存 + 页面加载时回填最稳妥
这是兼容性最好、不依赖框架、能覆盖刷新/关页/切标签等所有丢数据场景的方案。关键不是“提交时存”，而是“每次输入就存”：
- 监听
input事件（不是change），避免 textarea 粘贴、中文输入法上屏漏触发 - 键名用
`draft_${form.id}_${el.name}`，确保不同表单、同名字段不冲突 - 对
checkbox/radio存el.checked，不是el.value；select[multiple]要用Array.from(el.selectedOptions).map(o => o.value) - 页面加载后，先等 DOM 就绪（
DOMContentLoaded），再遍历字段，检查元素是否存在，再赋值 - 填完手动触发
input事件：el.dispatchEvent(new Event('input', { bubbles: true }))，让校验逻辑或框架响应
多步骤表单跨页面时别只存一个对象
比如地址页 → 支付页 → 提交，用户在支付页失败返回地址页，地址页状态不能靠“全局草稿对象”恢复——它可能已被支付页覆盖。正确做法是分片存储：
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 每页用独立 key：
localStorage.setItem('step_address', JSON.stringify(data)) - 跳转前不清理，只在最终成功提交后统一调用
localStorage.removeItem('step_address')等 - 如果某步支持“暂存并离开”，可加时间戳字段，避免过期数据干扰
- 注意
sessionStorage不跨页面，只适合单页内 tab 切换，跨路由跳转无效
敏感字段如密码、身份证号坚决不进 localStorage
localStorage 是明文存储，无加密、无访问控制，任何同源脚本都可读取。一旦被 XSS 注入，等于直接泄露：
立即学习“前端免费学习笔记（深入）”；
- 密码字段：跳过保存，或用
type="password"+autocomplete="off"配合服务端 session 回填 - 银行卡号、手机号：可用内存缓存（
const tempCache = {}），但页面卸载即失，需接受该限制 - 若业务强要求本地暂存，必须用 Web Crypto API 加密后再存，但增加复杂度且 Safari 对
SubtleCrypto支持不稳定
真正容易被忽略的点是：localStorage 容量超限时静默失败，建议所有 setItem 都包 try/catch，捕获 QuotaExceededError 后降级为内存缓存，并给用户轻量提示。
