onblur直接保存会丢中文输入法上屏内容，必须配合input事件前置缓存+防抖（800ms）+编辑器api取值+visibilitychange/focusout补漏+beforeunload仅作提示。

onblur 保存会丢中文输入法上屏内容

直接写 onblur="saveNote()" 看似简单，但中文输入法下极易丢数据：用户刚敲完“你好”，还没点「完成」或按空格上屏，blur 就已触发，此时 textarea.value 还是空或旧值。

• 必须搭配 input 事件做前置捕获：每次按键、粘贴、删除都更新缓存，blur 只负责兜底同步
• 避免在 blur 里直接读 .value，先检查是否已有缓存值（比如用 data-draft 属性暂存）
• iOS Safari 中，键盘收起不总触发 blur，需叠加 visibilitychange 监听

localStorage.setItem() 频繁调用会导致卡顿

每敲一个字就存一次 localStorage.setItem()，尤其在 textarea 输入中文时，输入法组合过程会高频触发 input 事件，造成主线程阻塞。

html-to-pptx-converter

使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。

下载

• 必须加防抖：用 setTimeout + clearTimeout 控制 800ms 停顿后才写入
• 键名要带上下文：比如 draft-note-form-123，别用固定名 userNote，否则多个表单互相覆盖
• 存前加时间戳：{"content":"xxx","savedAt":1715823400123}，恢复时校验是否超 24 小时

blur 和 focusout 在富文本场景下行为不一致

textarea 原生控件用 blur 没问题，但换成 contenteditable 或 Quill/TinyMCE 等编辑器后，blur 可能不触发，focusout 又因冒泡机制误判子元素失焦。

• 优先使用编辑器自有事件：如 Quill 的 text-change，TinyMCE 的 onChange 回调
• 若必须监听失焦，对 contenteditable 元素，应调用其 API 获取内容（如 editor.getHTML()），而非读 .innerText
• 移动端慎用 focusout：iOS 键盘收起后常无响应，改用 window.innerHeight 变化检测更可靠

页面刷新前没保存怎么办

beforeunload 是最后防线，但它只支持同步操作，且不能阻止用户关闭——只能弹提示，无法自动保存。

• 不能依赖它来存数据：localStorage.setItem() 虽同步，但若浏览器正忙或内存不足，仍可能失败
• 应在 beforeunload 里仅做脏标记检查：如果 hasUnsavedChanges === true，才弹提示“内容未保存”，不尝试写入
• 真正可靠的保存动作，必须发生在用户输入过程中（input + 防抖）和失焦时（blur + 校验），而不是等到关页前

防抖阈值、时间戳校验、编辑器 API 取值、移动端 fallback 监听——这四点漏掉任何一项，都可能在特定设备或输入法下丢数据。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！