监听页面卸载事件不能可靠自动保存，应改用input/blur实时暂存+beforeunload仅作离开提醒；需防抖、判值变更、字段粒度存储，并单独监听paste事件。
监听页面卸载事件触发自动保存
浏览器原生的 beforeunload 事件是唯一能在用户关闭标签页、刷新或导航离开前执行逻辑的时机，但它有严格限制：不能异步等待、不能弹出自定义提示（仅支持浏览器默认提示）、且无法可靠触发 fetch 或 localStorage 写入（部分浏览器会中断）。所以真正可行的方案不是靠它“保存”，而是用它“提醒”+提前持续监听。
用 input 和 blur 事件实时捕获变更
用户输入未提交就离开，问题本质是内容丢失，而不是“离开那一刻才存”。应放弃“临门一脚”的思路，转为高频轻量暂存。推荐在表单控件上绑定以下事件：
-
input：适用于<input>、<textarea></textarea>，每次键入立即触发（包括粘贴、删除） -
change：适用于<select></select>或失去焦点后值变化时触发，更节制但可能漏掉未失焦的修改 -
blur：作为兜底，确保用户切走前至少存一次
示例：
document.getElementById('myTextarea').addEventListener('input', function() {
localStorage.setItem('draft_content', this.value);
});
避免重复写入和性能浪费
频繁触发 localStorage.setItem 在低端设备或长文本场景下可能卡顿，尤其配合防抖不当。关键处理点：
- 不要对每个
input都立刻写入 —— 用setTimeout+clearTimeout实现 300ms 防抖 - 只在值真正变化时才写入：缓存上次保存的值，
if (newValue !== lastSaved) { ... } - 避免监听整个表单 —— 按字段粒度控制，不同
textarea各自独立存 key，如'draft_title'、'draft_body'
用户确认离开前检查草稿状态
beforeunload 唯一被允许的用途是返回字符串提示（现代浏览器已屏蔽自定义文案），但可借此判断是否真有未保存内容：
- 设置一个标志位
isDirty = true，在每次成功暂存后置为false - 监听
beforeunload时，若isDirty为true，返回任意非空字符串（如"您有未保存的内容"） - 注意：该提示只在用户主动离开时出现，刷新/关闭标签页有效，但点击链接跳转不一定触发（取决于浏览器策略）
示例：
window.addEventListener('beforeunload', function(e) {
if (isDirty) {
e.returnValue = '';
return '';
}
});
实际中最容易被忽略的是：用户复制粘贴大段内容时，input 事件可能因浏览器优化而合并触发，导致防抖延迟过长；建议对 paste 事件单独监听并立即保存。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
