用 dataset 属性标记本地修改但未同步的 DOM 元素，需用 JSON.stringify 序列化原始值存入 data-original，编辑时同步当前值到 data-current 并比对，配合 localStorage 存最小 patch 实现离线冲突识别。
怎么用 dataset 属性标记本地修改但未同步的 DOM 元素
离线冲突标记的本质，是让每个带数据的元素自己“记住”它当前状态和云端原始值的差异。直接改 innerHTML 或塞个 class="conflict" 不够——你得能反查“它原本是什么”。dataset 是最轻量、语义最干净的选择。
常见错误是把原始值存在 data-original 里却忘了转义：比如原始值含双引号或换行，渲染后属性值被截断，后续比对直接失效。务必用 JSON.stringify() 序列化后再塞进 dataset。
- 读取原始值时用
JSON.parse(el.dataset.original)，别直接当字符串比 - 只在元素首次渲染（非用户编辑后）时写入
dataset.original，避免覆盖 - 如果原始值是对象/数组，必须序列化；纯字符串也建议统一序列化，省得类型判断分支
el.dataset.original = JSON.stringify({ name: "张三", status: "active" });
用 getComputedStyle + border 实现无侵入式高亮
加 class 看似简单，但容易和业务 CSS 冲突：比如某个组件已定义 .conflict { background: red }，结果全局样式一覆盖，冲突态反而看不见了。用内联 style 又难维护。折中方案是靠 getComputedStyle 动态检测并叠加边框，不碰 class、不依赖预设样式。
性能上没压力——只在 diff 触发时跑一次，且只查 border 这种廉价属性。兼容性从 Chrome 1 到 Edge 12 都支持。
立即学习“前端免费学习笔记（深入）”；
- 高亮逻辑写在 diff 后：遍历所有带
dataset.original的元素，对比当前值与原始值 - 冲突时执行
el.style.border = "2px solid #ff6b6b"，恢复时用el.style.removeProperty("border") - 别用
outline：它不占布局空间，可能遮挡相邻元素的 hover 效果
localStorage 存差异快照时，为什么不能直接存整个对象
本地存的是“差异快照”，不是全量数据。存整个对象看似省事，实际会埋三个坑：一是序列化体积爆炸（尤其带冗余字段时），二是下次加载时无法精准定位哪几个字段变了，三是和后端 patch 接口对不上——人家只要 {name: "李四"}，你传过去一个带 20 个字段的大对象，后端要么拒收，要么静默丢弃。
正确做法是每次编辑后，只提取变更字段生成最小 patch 对象，并用键路径（如 "user.profile.name"）作 key 存进 localStorage。
- 用
Object.keys(newVal).filter(key => newVal[key] !== origVal[key])提取变更字段 - 存的时候用
localStorage.setItem("patch:user.id.123", JSON.stringify(patchObj)) - 读的时候先
JSON.parse(localStorage.getItem(...))，再合并到当前状态，别直接赋值
离线冲突标记失效的典型场景：表单控件值没同步到 dataset
输入框、下拉框这些控件，value 属性和 DOM 属性不同步是常态。用户输完字，el.value 是新值，但 el.getAttribute("value") 还是初始值——如果你靠 getAttribute 去比对，永远显示“无冲突”。
必须监听 input 或 change 事件，手动把当前 value 同步进 dataset.current，再跟 dataset.original 比。
- textarea 和 contenteditable 元素要用
textContent或innerText，别用value - select 元素比对的是
selectedOptions[0].value，不是value属性本身 - checkbox/radio 要检查
checked属性，而不是value
最易忽略的一点：用户离线编辑后刷新页面，dataset.current 会丢失。得在页面加载时，从 localStorage 里捞出 patch 数据，重新写回对应元素的 dataset.current ——否则刷新即“失忆”。
