如何设置HTML页面自动定时保存内容？

本文共计953个文字，预计阅读时间需要4分钟。

HTML本身做不了自动保存，必须依赖JavaScript驱动+localStorage+合理的事件监听才能实现落地。定时轮询（setInterval）是下策，而利用beforeunload防抖才是实用、少丢数据的组合。

为什么不能直接用 setInterval 每30秒存一次

setInterval 看似简单，但实际会带来三类问题：一是用户刚敲完字就关页，最后一次输入没来得及存；二是内容没变也硬写，浪费 I/O 还可能触发 QuotaExceededError；三是移动端键盘收起、页面切后台时，定时器可能被系统暂停或降频，导致漏存。

更关键的是：localStorage.setItem() 是同步操作，但频繁调用仍会阻塞主线程——尤其在低配 Android 设备上，连续 10 次写入就能感知卡顿。

• 别写 setInterval(() => { saveDraft() }, 30000) 这种逻辑
• 真要用定时器，至少加“值比对”：只在 JSON.stringify(formData) 和上次缓存不同时才写
• 注意 Safari 无痕模式下 localStorage 直接静默失败，try/catch 里捕获不到异常，得先做可用性探测

input 事件 + 防抖才是主流做法

监听 input 事件能捕获每次按键、粘贴、中文输入法上屏，比 change 或 blur 更及时。但原生触发太密，必须加防抖。

立即学习“前端免费学习笔记（深入）”；

实操要点：

• 用 setTimeout + clearTimeout 手写防抖，延迟设为 400–600ms（太短易漏，太长易丢）
• 只对非空字段存：比如 if (el.value.trim()) { ... }，避免覆盖 placeholder 或初始值
• 键名带上下文：如 draft-${location.pathname}-${el.name}，防止多表单冲突
• 存前用 JSON.stringify()，取回必须 JSON.parse()，否则 getItem() 返回 null 会导致 SyntaxError: Unexpected token u

beforeunload 必须配合“脏标记”使用

beforeunload 是唯一能拦截关闭/刷新的时机，但它只允许同步执行，且窗口极短（约 50ms）。很多人在这里写 await saveDraft()，结果什么都没存成。

正确姿势是：

• 定义一个全局布尔变量 hasUnsavedChanges = false
• 每次防抖存完后设为 false；每次 input 触发时设为 true
• beforeunload 回调里只做一件事：if (hasUnsavedChanges) return ''（现代浏览器只显示统一提示）
• 真正的存储动作，必须在防抖函数里完成，不能拖到 beforeunload 里

恢复草稿时容易忽略的细节

页面加载后恢复不是简单遍历赋值。几个硬坑：

• textarea 用 .value = text 即可，但 contenteditable 元素得用 .innerText = text，别用 .innerHTML（XSS 风险）
• checkbox/radio 要单独处理：el.checked = storedValue === 'true'，不能直接赋 value
• 恢复后手动触发 dispatchEvent(new Event('input', { bubbles: true }))，否则 Vue/React 不响应
• 时间戳校验别漏：存的时候写 savedAt: Date.now()，恢复前判断是否超 24 小时，过期就丢弃

最麻烦的其实是动态字段和富文本编辑器——它们不走原生 input 流，得各自绑定对应事件（如 Quill 的 text-change），而且 DOM 插入后必须立刻监听，否则新增行的输入就进不了草稿。