跨表单提交后 input 值刷新即空，因原生提交会重载页面导致 DOM 重建、运行时值丢失；应通过 input 事件实时存入 localStorage 并在 DOM 加载后回填，注意分片存储、敏感字段不缓存、异常降级处理。

跨表单提交时 input 值为什么一刷新就空了

浏览器原生表单提交（form.submit() 或点击 ）会触发页面跳转或重载，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 后降级为内存缓存，并给用户轻量提示。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！