如何设置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 更及时。但原生触发太密，必须加防抖。