表单数据还没提交就刷新了，怎么自动存草稿？
用 localStorage 监听输入并实时保存是最轻量、兼容性最好的做法。别等“提交时”才存——用户可能关掉标签页、网络中断或手滑刷新，这时候只有「每次输入后立刻落盘」才真正防丢。
- 监听
input事件（不是change），否则textarea粘贴、contenteditable编辑会漏存 - 给每个表单加唯一
id，保存键名用`draft_${formId}`，避免多个表单互相覆盖 - 值为空时也建议存空字符串，而不是跳过，否则用户清空字段后刷新会恢复旧值
- 敏感字段（如密码、银行卡号）不要进
localStorage，哪怕只是草稿——浏览器本地存储无加密保障
页面加载时怎么把草稿填回去？
不能一上来就 querySelectorAll('input, textarea, select') 然后遍历赋值：表单可能异步渲染（比如 Vue/React 组件、AJAX 加载的表单），DOM 还没出来就操作会静默失败。
- 确保 DOM 就绪后再读取
localStorage，原生 JS 用DOMContentLoaded，框架里走对应生命周期（如 React 的useEffect） - 填值前先检查字段是否还存在于当前 DOM，用
element && element.value !== undefined防止报错 - 对
select要设selectedIndex或匹配value；checkbox/radio要设checked属性，不能只改value - 填完触发一次
input事件（element.dispatchEvent(new Event('input', { bubbles: true }))），让绑定的校验逻辑或状态管理能感知变化
用户点了「清空草稿」但没反应，问题出在哪？
常见原因是删除逻辑和保存逻辑用了不同 key，或者没同步清理关联状态。比如表单有多个 tab，草稿按 tab 分片保存，但清除按钮只删了主表单的 key。
- 清除动作必须和保存时用完全一致的 key，推荐封装成函数：
saveDraft(formId, data)和clearDraft(formId) - 如果表单支持多步骤（如分页 wizard），草稿应按 step 存为对象，清除时别只删顶层 key，要确认是否要保留其他 step 的数据
- 调用
localStorage.removeItem(key)后，建议再读一次验证是否真删了，某些浏览器在隐私模式下会静默拒绝写入/删除 - 别忘了 UI 反馈：清除后把按钮置灰 1 秒，或显示「已清空」tooltip，否则用户不确定操作是否生效
localStorage 容量超了或跨设备不同步怎么办？
localStorage 硬限制约 5–10MB（实际 Safari 移动端常卡在 2MB），且纯前端方案天然不跨设备。真要保可靠性，得降级或补方案。
立即学习“前端免费学习笔记（深入）”；
- 存之前先
try...catch包住localStorage.setItem，捕获QuotaExceededError，降级为内存缓存（sessionStorage或全局对象），并提示用户“草稿暂未保存” - 不要试图序列化整个表单 DOM 树，只存关键字段的
name和value，用JSON.stringify({ name: value })，体积可控 - 跨设备需求强的场景（如 CMS 后台），必须走服务端草稿接口，前端只负责定时 POST 到
/api/drafts并带用户身份标识，否则永远只是“本机有效” - 注意有效期：用户半年没登录，草稿还留着？建议服务端加
expires_at字段，前端存时也记个时间戳，加载时比对是否超 7 天自动丢弃
console.debug('saved draft', key)），读的时候加断言（if (!data) return），上线前用无痕窗口反复刷三次再填再关——这才是真实用户干的事。 
