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 事件，造成主线程阻塞。

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

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

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

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

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

页面刷新前没保存怎么办

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

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

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

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