localStorage保存表单数据最轻量兼容，需实时监听input/change事件存取、页面加载即还原，并处理多选框/日期等特殊控件值读取、JSON序列化、重置清空及跨标签页同步问题。
用 localStorage 保存表单字段值，页面刷新不丢数据
直接写入 localStorage 是最轻量、兼容性最好的方案，适用于大多数输入类表单（input、textarea、select）。关键不是“存”，而是“什么时候存”和“什么时候取”——必须监听用户输入变化，且在页面加载后立即还原。
实操建议：
- 给每个需要暂存的表单控件加唯一
name或id（如id="username"），后续用它作为localStorage的 key - 对
input[type="text"]、textarea绑定input事件（不是change，后者要失焦才触发） - 对
select和input[type="checkbox"]、input[type="radio"]用change事件更稳妥 - 存之前先检查
localStorage是否可用（部分浏览器无痕模式下会抛SecurityError）
示例片段：
if (typeof localStorage !== 'undefined') {
const $user = document.getElementById('username');
$user.addEventListener('input', () => {
localStorage.setItem('form_username', $user.value);
});
$user.value = localStorage.getItem('form_username') || '';
}
beforeunload 事件能兜底，但别依赖它单独存数据
这个事件在用户关闭标签页或刷新前触发，看似适合做“最后保存”，但它有严重限制：不能异步、不能阻止默认行为（现代浏览器已禁用 event.preventDefault()）、执行时间极短（约 50ms），且不保证一定触发（比如进程被强杀）。
立即学习“前端免费学习笔记（深入）”；
所以它只适合补漏，不能替代实时监听。常见错误是只在 beforeunload 里存一次，结果用户打字没保存就切走了。
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
实操建议：
- 仅用于保存那些你没监听到的边缘状态（比如用户快速切换 tab 后又回来，中间改了但没触发 input 事件）
- 只调用同步操作：直接
localStorage.setItem()，不要加await或fetch - 务必配合页面加载时的恢复逻辑，否则
beforeunload存了也白存
处理多选、复选框、日期等特殊控件要区分 value 获取方式
不同表单控件的值读取方式不同，硬套 .value 会出错。比如 input[type="checkbox"] 要看 .checked，select[multiple] 得遍历 selectedOptions，input[type="date"] 的值是字符串但格式固定（YYYY-MM-DD）。
实操建议：
-
checkbox和radio：存el.checked ? 'true' : 'false'，取时转布尔 -
select[multiple]：用Array.from(el.selectedOptions).map(o => o.value)转数组，再JSON.stringify()存 -
date/datetime-local：直接用.value，但注意还原时如果值非法（如空字符串），需清空控件而非报错 - 所有存入
localStorage的值必须是字符串，复杂结构必须JSON.stringify()，取回时JSON.parse()并加try/catch
别忽略表单重置（reset）和跨设备同步问题
用户点“重置”按钮后，表单 UI 回到初始值，但 localStorage 里的数据还在——下次打开还是旧值，造成错觉。另外，localStorage 是按 origin 隔离的，同一网站在手机和电脑上互不同步。
实操建议：
- 监听
form.reset事件，在触发时同步清空对应 key 的localStorage - 如果表单有明确的“放弃编辑”流程，主动调用
localStorage.removeItem(key) - 不要试图用
localStorage做跨设备持久化；真有该需求，得走后端 API + 用户登录态 - 长期未使用的暂存数据建议加时间戳，比如存
{ value: 'xxx', ts: Date.now() }，避免缓存污染
真正容易被忽略的是：用户可能在多个标签页同时打开同一表单，localStorage 变化不会自动通知其他页面。如果需要实时同步，得用 storage 事件监听并手动更新 UI，但这会增加复杂度，多数场景其实不需要。
