html标签属性无法控制自动保存频率，因浏览器忽略非标准属性，自动保存需javascript读取表单值并写入localstorage/sessionstorage。
HTML 标签属性完全无法控制页面自动保存频率。浏览器不识别任何类似 save-interval、autosave="30s" 或 data-save-delay 这样的自定义属性，它们会被直接忽略，且不会触发任何保存行为。
所谓“自动保存”，本质是 JavaScript 主动读取表单值 + 写入 localStorage 或 sessionStorage，HTML 本身没有执行能力，也不提供持久化接口。
为什么 input save-interval="30000" 这类写法无效
input save-interval="30000" 这类写法无效- 浏览器解析 HTML 时只认标准属性（如
id、name、required），非标准属性只是 DOM 节点上的普通字符串，不会绑定逻辑 - 没有 JS 配合，这些属性就像写在注释里一样——存在，但不起作用
- 常见翻车现场：
<form autosave="true" interval="60"></form>→ 控制台无报错，但刷新后内容全丢
真正影响保存频率的 JS 参数有哪些
保存频率不是由 HTML 决定的，而是由以下 JavaScript 行为共同决定：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
-
setInterval(saveDraft, 30000)：定时器间隔（但不推荐单独使用） -
input事件监听 + 手写防抖延迟（如setTimeout(..., 800)）：实际生效的节奏控制点 -
beforeunload中是否设了脏标记（hasUnsavedChanges）：决定关页前要不要补存一次 - 用户输入节奏本身：中文输入法下拼音未上屏前就触发
input，需靠防抖过滤
关键参数对比：
- 防抖延迟设为
300：易存中间态（如“shang”），移动端卡顿明显 - 设为
800：覆盖拼音选词、粘贴、删改停顿，实测漏存率最低 - 定时器用
30000：无法感知用户是否真在输，关页前最后一段大概率丢失
如何让“保存频率”更可靠，而不是更频繁
高频 ≠ 可靠。真正防丢的关键是在对的时机写一次，而不是在错的时机写十次：
- 只对非空字段保存：
if (el.value.trim()) { ... }，避免覆盖 placeholder 或初始值 - 键名必须带上下文隔离：
draft-${location.pathname}-${el.name}，否则多表单/多 tab 互相污染 - 恢复草稿前检查 DOM 是否真实可用：
if (el && 'value' in el)，否则 Vue/React 表单赋值无效 -
beforeunload回调里只返回字符串提示，不执行saveDraft()—— 它没时间跑完 - Safari 无痕模式下
localStorage静默失败，需提前探测：try { localStorage.setItem('test', '1') }
防丢最脆弱的一环，往往不是“没存”，而是“存了但没读回来”——DOM 尚未挂载、键名冲突、类型误判（比如把 null 当字符串 JSON.parse）、或用了 innerHTML 导致 XSS 过滤拦截赋值。这些细节比“设成 30 秒还是 60 秒”重要得多。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
