应使用 input 事件实时监听输入并存入 localstorage，键名加前缀，dom 加载完成后再还原值，checkbox/radio 需设 checked 状态，表单统一用 formdata 聚合存取，提交后及时清除缓存。
直接用 localStorage 就行，但必须处理好字符串序列化、字段还原时机和特殊控件（如 checkbox、radio）的值映射——否则存了也白存。
input 实时保存到 localStorage 的正确监听方式
别只监听 change 事件，它在失焦后才触发，用户刷新页面就丢了；必须用 input 事件实时捕获每次输入：
-
input事件能响应中文输入法上屏后的最终值，keydown或keypress会误存拼音中间态 - 多个
input共享一个监听器更可靠，避免为每个字段单独绑定 - 记得对值做
value.trim()清洗，防止空格干扰后续判断 - 键名建议带前缀，比如
form-draft-username，避免和其他业务 key 冲突
页面加载时还原 input 值的关键时机
还原逻辑必须等 DOM 完全就绪再执行，否则 document.getElementById() 找不到元素：
- 把还原代码包在
window.addEventListener('DOMContentLoaded', () => { ... })里，不是load，也不是直接写在<script></script>中 - 不要依赖
$(document).ready()，除非你确定 jQuery 已加载且版本兼容 - 如果 input 是动态插入的（比如通过 JS 创建），得等插入完成后再读取
localStorage - 对
type="checkbox"或type="radio"，不能只设value，要根据存储的布尔值设checked = true/false
多字段表单统一存取的实用封装
手动为每个字段写 setItem 和 getItem 很容易漏，推荐按表单维度聚合操作：
- 用
form.elements遍历所有可编辑字段，跳过type="hidden"、disabled或readonly - 存的时候用
JSON.stringify(Object.fromEntries(new FormData(form)))，比逐个取值更健壮 - 取的时候用
JSON.parse()后遍历对象，再匹配form.elements[name]赋值 - 注意
FormData对checkbox只返回选中的项，未选中不会出现在结果里，还原时得先清空所有同 name 的checked状态再重设
最常被忽略的是：提交成功后没调用 localStorage.removeItem()，导致下次打开表单还是旧数据；还有人把整个 FormData 对象直接传给 setItem，结果存进去是 [object FormData] 字符串——这种错误查起来特别费时间。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
