应存语义化锚点，如{ id: "doc-123", offset: 42, keyword: "API" }，通过data-id定位容器、文本节点内字符偏移量恢复高亮，避免依赖DOM结构或scrollTop。
刷新后搜索高亮消失、滚动位置重置、关键词标记错位——根本不是高亮逻辑写得不够炫，而是没把「上次高亮在哪」这个状态存下来。localStorage 就是干这事的，但直接存 scrollTop 或 DOM 节点不行，得存语义化锚点。
怎么存高亮位置才不会失效？
不能存 DOM 元素引用（刷新就丢），也不能只存 scrollTop（页面结构一变就错位）。正确做法是：用唯一标识定位内容块，再记录关键词在其中的文本偏移量或节点路径。
- 优先用 URL hash 或 data-id 属性作为内容容器 ID，比如
- 高亮前先
getSelection().getRangeAt(0).cloneRange()拿到原始选区范围，提取其父元素的data-id和文本节点内字符起始位置 - 存进 localStorage 时用结构化对象：
{ id: "doc-123", offset: 42, keyword: "API" } - 恢复时先查
document.querySelector('[data-id="doc-123"]')，再遍历其文本节点匹配 offset，避免依赖全局 DOM 结构
为什么 localStorage.getItem('highlight') 总是 null？
常见原因是高亮触发时机太早——DOM 还没加载完就去读缓存，或者跨域/无痕模式下 localStorage 被禁用。更隐蔽的是：你存了，但没在合适时机读。
- 确保读取操作在
DOMContentLoaded之后，且目标内容容器已渲染（可用MutationObserver监听动态插入） - 加一层防御：读不到时 fallback 到 URL 参数，比如
location.search.match(/q=([^&]+)/)?.[1] - 检查是否在 file:// 协议下运行——多数浏览器会禁用
localStorage，必须走 http:// 或 https:// - 别用
sessionStorage，它关页即丢，不满足“记忆上次”的需求
中文搜索高亮后位置偏移怎么办？
正则替换破坏了原始文本节点结构，导致后续计算字符偏移量失真。尤其当关键词嵌在中文词中（如搜“服务”，“微服务”也被标中），再想精确定位就更难。
- 高亮前必须克隆原始文本节点内容，存在缓存里，而不是只存渲染后的 HTML 字符串
- 用 Unicode 边界断言限制匹配范围：
/(? - 恢复高亮时，不要直接操作
innerHTML，而要重建文本节点树：先清空容器，再用document.createTextNode()和document.createElement('mark')拼接 - 如果页面含富文本（如带 inline-style 的 span），建议统一用
textContent提取纯文本做匹配，高亮时再映射回 DOM 路径
最易被忽略的一点：高亮状态和滚动位置是两件事。存了高亮位置，不代表用户能看到——你还得调用 element.scrollIntoView({ block: 'center' })，且这个动作必须等高亮 DOM 真正渲染完毕后执行，否则 scroll 会失败。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
