快照时机应优先选requestidlecallback，因其能在浏览器空闲时执行、避免卡顿；但需用beforeunload兜底确保关键状态不丢失，高频更新需节流（如200ms最小间隔），显式操作则同步序列化。
快照时机选 requestIdleCallback 还是 setTimeout？
直接用 setTimeout 容易打断渲染或抢走主线程资源，尤其在频繁交互场景下，快照可能丢帧甚至卡顿。而 requestIdleCallback 能在浏览器空闲时执行，更安全——但注意它不保证一定执行（比如页面切到后台时会被取消），所以关键状态变更仍需搭配 beforeunload 补充兜底。
- 高频更新（如拖拽、输入）：优先用
requestIdleCallback+ 节流（例如最小间隔 200ms） - 用户显式操作（如点击“保存草稿”）：同步序列化，不等空闲
- 页面即将卸载：监听
beforeunload，触发一次强制快照
HTML 模板里怎么提取组件状态？别依赖 DOM 树遍历
模板中若用 data-state-key 属性标记可快照字段（如 <input data-state-key="username">），比靠 class 名或节点顺序解析更稳定。避免写 document.querySelectorAll('input, select, textarea') 这类泛匹配——一旦模板加了搜索框或日历控件，就可能把无关字段也塞进快照。
- 只读字段（如
<span data-state-key="order_id">123</span>）用textContent取值，不用innerHTML - 复选框/单选组统一用
name作为 key，值为数组（即使单选也保持数组结构，方便后续扩展） - 动态生成的列表项，需确保每个子项有唯一
data-state-key，例如item-0-title、item-0-desc
快照数据存哪？localStorage 的容量和序列化陷阱
localStorage 单域名上限约 5–10MB，但实际能用的远少于这个数——因为字符串化后体积膨胀（比如 Date 对象变长字符串），且浏览器对单个 key 的 value 长度也有隐式限制（Chrome 约 2MB）。直接 JSON.stringify(state) 存，遇到函数、undefined、Symbol 或循环引用会静默失败。
- 序列化前用
JSON.stringify(state, (k, v) => v === undefined ? null : v)过滤掉 undefined - 日期统一转为 ISO 字符串：
new Date().toISOString()，别存Date实例 - 大对象（如富文本内容）考虑截断或哈希后存摘要，避免撑爆 storage
- 写入前加校验：
if (typeof state === 'object' && state !== null) { ... }，防止空状态覆盖旧快照
还原时如何避免模板与快照字段错位？
快照还原不是简单遍历赋值。如果模板结构改了（比如把 data-state-key="phone" 移到另一个 div 下），而代码仍按旧路径找节点，就会静默失败。必须做存在性检查，且对缺失字段留默认值或跳过。
- 还原前先查节点：
const el = document.querySelector(`[data-state-key="${key}"]`)，el 不存在就continue - 输入类元素区分类型：
el.type === 'checkbox'时设el.checked，否则设el.value - 禁用字段（
disabled或readonly）跳过还原，防止覆盖用户意图 - 还原完成后触发
input或change事件，让 Vue/React 等框架能感知变化（如果用了响应式库）
theme 字段，新版模板已删，这类字段必须明确忽略，不能报错中断流程。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
