实时存 localstorage 应监听 input 事件并防抖300ms，只存非空值、加前缀键名、对象需 json 序列化；刷新后遍历字段匹配键名恢复，注意 checkbox/radio 和第三方组件适配；beforeunload 中同步保存，排除密码等敏感字段。
表单输入时怎么实时存到 localStorage
直接监听 input 事件，配合防抖写入 localStorage 是最稳的路径。不推荐用 change（要失焦才触发）或 blur（用户可能没来得及存就关页了）。
- 每次
input触发后延迟 300ms 再存，避免高频打爆存储（尤其富文本或大字段） - 只存有值的字段：
if (el.value.trim()) { ... }，空值不覆盖已有缓存 - 键名建议加前缀，比如
form-draft-${formId}-${fieldName}，避免多个表单冲突 - 注意
localStorage.setItem只接受字符串，对象要先json.stringify，取回时记得JSON.parse
页面刷新后怎么把草稿自动填回去
在表单渲染完成、dom 可访问后立刻执行恢复逻辑，不是靠 window.onload 或 DOMContentLoaded 后硬等——有些框架（如 React/Vue）里 DOM 可能还没挂载好。
- 遍历所有可编辑字段（
input、textarea、select），用name或id匹配缓存键 - 填值前先检查
localStorage.getItem是否存在且非NULL，避免JSON.parse(null)报错 - 对
checkbox和radio要单独处理：存的是布尔值或 value 字符串，恢复时设checked属性，不是value - 如果用了第三方组件（如
react-hook-form），别直接操作 DOM，走其setValueAPI
用户关闭页面前怎么确保最后一版被保存
beforeunload 是唯一可靠时机，但它的执行窗口极短（约 50ms），不能做异步操作，也不能弹窗干扰（现代浏览器已屏蔽）。
- 在
input事件中持续更新一个“脏标记”（isDirty = true），不依赖定时器轮询 -
beforeunload回调里只做同步写入：localStorage.setItem(...)，不要加await或fetch - 别在该回调里调用自定义函数封装的存逻辑——万一它内部有 await 或 try/catch 异步链，就失效了
- 测试时用
location.reload()不触发beforeunload，要用真实关闭标签页或按 F5 强刷验证
哪些字段不该自动保存
密码、验证码、支付相关字段必须排除。不是怕泄露，而是语义上它们本就不该跨会话留存，且重复提交可能触发风控。
立即学习“前端免费学习笔记（深入）”；
- 显式跳过
type="password"、data-no-autosave、name含Token/captcha的字段 - 动态生成的字段（如通过 JS 添加的行）需在插入 DOM 后立即绑定监听，否则后续输入不会被捕获
- 富文本编辑器（如
quill、tinymce）要监听其自有事件（如text-change），不能只靠原生input - 服务端校验失败后清空缓存？不建议。用户改错重提是常见流程，草稿保留反而更友好
自动保存真正难的不是存和取，是判断“什么时候算用户真正在意这个字段”。比如搜索框输一半就切走，要不要留？地址字段改了三行又删掉两行，算不算修改？这些边界得结合业务定，代码只是工具。