input事件+防抖是唯一靠谱组合，因change需失焦、中文输入法下高频input易丢数据或卡顿；防抖延迟800ms存入、键名带上下文、区分表单元素类型、dom就位后触发事件更新、beforeunload仅作提示、敏感字段过滤、多标签页需版本控制。
别用 change 事件存草稿，也别一输入就调 localStorage.setItem() —— 这两种做法在中文输入、富文本、动态表单里都会丢数据或卡顿。
为什么 input 事件 + 防抖才是唯一靠谱组合
用户按下一个键、粘贴一段文字、用输入法选词，input 都能捕获；而 change 要等失焦，blur 更晚，关页前根本来不及触发。但直接监听 input 并立刻写入 localStorage 会出问题：
- 中文输入法下，每敲一个拼音就触发一次，高频写入拖慢页面，还可能把未完成的组合词（比如只打了“shang”还没选“上海”）存进去
-
textarea内容很长时，连续触发会导致主线程阻塞 - 没加键名隔离，多个表单共用同一个
localStoragekey，互相覆盖
实操建议：
- 用
setTimeout+clearTimeout手写防抖，延迟 800ms 再存（比 300ms 更稳妥，适配输入法节奏） - 键名必须带上下文，例如
draft-${form.id || 'default'}-${Date.now().toString(36)}，避免冲突 - 只对
input、textarea、select和带type="checkbox"/type="radio"的元素生效，跳过button、hidden、password
恢复草稿时 DOM 还没渲染完？先等它“真就位”
很多代码在 DOMContentLoaded 里读 localStorage 并填值，结果填了个寂寞——Vue/React 组件还没 mount，或者表单是 AJAX 加载的，DOM 根本不存在。更糟的是，直接遍历 form.elements 然后赋值 .value，对 checkbox 无效，对第三方组件（如 react-hook-form）完全不响应。
实操建议：
- 原生 JS：用
form.addEventListener('formdata', ...)（需配合FormData构造），或监听自定义事件如'form-ready'，由表单渲染完成后主动派发 - 填值前加判断：
if (el && 'value' in el) el.value = data[el.name]，对checkbox单独处理：el.checked = Boolean(data[el.name]) - 填完必须触发事件：
el.dispatchEvent(new Event('input', { bubbles: true }))，否则 Vue 的v-model、React 的受控组件不会更新 - 不要一加载就
focus()，移动端弹键盘会打断用户操作
beforeunload 不是存储时机，只是最后确认开关
beforeunload 的回调只有 ~50ms 执行窗口，且必须同步返回字符串（现代浏览器已屏蔽自定义文案）。很多人在里面塞 await saveDraft() 或 fetch()，结果什么都没存成，还误以为“提示弹出来了就算存了”。
实操建议：
- 只用它做布尔判断：全局维护一个
hasUnsavedChanges = false，每次防抖存完设为false，输入开始时设为true -
beforeunload回调里只写：if (hasUnsavedChanges) return ''（空字符串即可触发默认提示） - 真正存储动作必须在防抖结束、或用户点击「保存草稿」按钮时完成，
beforeunload里不做任何写操作 - Safari 在无交互页面中可能忽略该事件，得降级：监听
visibilitychange，页面切到后台前强制存一次
哪些字段坚决不能进 localStorage
不是所有字段都适合自动保存。密码、验证码、token、银行卡号这类字段，语义上就不该跨会话留存，且本地明文存储毫无加密保障。
实操建议：
- 硬性过滤：
type="password"、name含captcha/token/cvv的字段，直接跳过收集 - 加属性控制：
<input data-no-autosave>，在遍历时检查el.hasAttribute('data-no-autosave') - 富文本编辑器（如 Quill、Tiptap）不能靠原生
input事件，得监听其自有事件，如text-change或update - 动态插入的字段（如点击“添加联系人”新增一行），要在插入 DOM 后立即绑定监听，否则后续输入不会被捕获
最常被忽略的一点：多标签页同时编辑同一表单时，localStorage 是共享的，但没有版本控制。A 标签页存了新草稿，B 标签页还在用旧数据编辑，提交后覆盖掉 A 的修改——这不是 bug，是设计盲区。得用 storage 事件监听 + 时间戳比对，或干脆引入服务端草稿同步机制。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
