网页表单用localStorage实现草稿自动保存，核心是监听input事件实时存值、按data-draft-key区分多表单、DOM加载后按键名规则恢复非空值，并提供提交清除与轻量提示。

网页表单用 localStorage 实现草稿自动保存，核心是监听用户输入、及时存入本地、页面加载时回填。关键在于“何时存”“存什么”“怎么读”，而不是一上来就写一堆代码。

监听输入并实时保存草稿

对表单内所有可编辑字段（input、textarea、select）绑定 input 事件（比 change 更及时），每次触发就收集当前值，序列化后存入 localStorage。

• 推荐用表单的 name 属性作为存储键名前缀，比如 draft-contact-form-name、draft-contact-form-email
• 避免用 id，因为 id 可能重复或含特殊字符；统一加前缀可防止和其他数据冲突
• 不需要 debounce 防抖——现代浏览器 localStorage 写入极快，连续输入几十次也无压力

给每个表单分配唯一标识符

一个页面可能有多个表单（如注册+登录），必须区分它们。最简单方式是在表单元素上加自定义属性：

DeepBI DHTML 页面生成器

生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur

下载

• 添加 data-draft-key="contact-us" 或 data-draft-key="signup"
• 保存时拼接为 localStorage.setItem('draft-' + key + '-email', value)
• 这样不同表单互不干扰，也能单独清空某一个的草稿

页面加载时自动恢复草稿

在 DOM 加载完成（DOMContentLoaded）后，遍历表单字段，按相同 key 规则从 localStorage 读取并赋值：

• 只恢复非空值，避免覆盖默认 placeholder 或初始选中项
• 对 checkbox / radio 要额外判断：存布尔值或字符串 "true"，读取后设 checked 属性
• 恢复完成后可触发一次 input 事件，确保依赖值变化的逻辑（如校验、联动）正常运行

提供手动清除和提示机制

草稿不是永久保留的，用户需要感知和控制：

• 提交成功后，用 removeItem 清掉对应前缀的所有 key（可用 for...in 遍历 localStorage 键名匹配清除）
• 加一个轻量提示，比如表单顶部浮动一行小字：“已恢复上次未提交的内容”，3 秒后自动消失
• 可选：加个「清空草稿」按钮，点击后确认清除，提升用户掌控感

不复杂但容易忽略的是键名设计和恢复时机——存得再勤，读不出来或读错地方，就等于没存。