data-star 是字符串属性，不可直接当布尔值使用；应显式赋值如 "active"/"inactive"，读取时用 === 比较，数值需 number() 转换；它不触发 css 重绘或框架响应，非持久化存储，需配合服务端、localstorage 和 broadcastchannel 同步状态。
data-star 是字符串，不能直接当布尔值用
你写 el.setAttribute('data-star', true)，实际存进去的是字符串 "true"；写 el.setAttribute('data-star', 'false')，读出来还是字符串 "false"。JavaScript 里 "false" == true 是 false，但 !!"false" 却是 true——这种隐式转换极易导致状态判断翻车。
实操建议：
- 显式赋值：统一用
data-star="active"/data-star="inactive"，避免真假混用 - 读取时别偷懒：
const isStarred = el.dataset.star === 'active'，而不是if (el.dataset.star) - 数值类场景（如星级评分）用
data-star="3"，后续必须Number(el.dataset.star)转换，否则"5" > "10"返回true
setAttribute 不触发 CSS 重绘或框架响应
data-star 是普通全局属性，浏览器不会因它变化自动重排版、重绘，Vue/React 也不会监听它做 diff。你改了 el.setAttribute('data-star', 'active')，CSS 里写了 [data-star="active"] { color: gold; }，但页面没变——大概率是旧版 Safari 或某些 SSR 场景下，dataset 赋值不触发样式更新。
实操建议：
- 优先用
el.setAttribute('data-star', 'active')，而非el.dataset.star = 'active'（后者在 Safari 16.4 之前不触发 CSS 选择器匹配） - 确保 CSS 选择器写对：
button[data-star="active"]，不是button [data-star]（空格会匹配后代元素） - 如果用了状态管理框架，别把
dataset当响应式源——它只读初始值，后续变更框架感知不到
点击后状态没同步，可能是事件绑定或缓存问题
用户点一次星星，UI 没反应；再点一次，才变色；或者刷新页面又回到原状——这不是逻辑错，而是典型交互链断裂。
常见原因和解法：
- 按钮在
<form></form>里却没设type="button"，点完立刻提交表单，DOM 修改被刷新冲掉 - 本地开发时浏览器强缓存 HTML/CSS，改了
data-star值但页面加载的仍是旧文件，按Ctrl+Shift+R硬刷新或清空缓存 - Live Server 插件没开自动重载，VSCode 改完保存，浏览器根本没收到新资源，检查
settings.json里是否含"liveServer.settings.reload": true - 移动端 iOS Safari 对
click有 300ms 延迟，误判为未响应，加touch-action: manipulation样式即可
要持久化收藏状态，data-star 只负责 UI，别存数据
data-star 是视图层标记，不是存储介质。用户关掉页面再打开，data-star 会回到 HTML 初始值，不会记住上次状态。
真正该做的：
- 点击时发请求更新服务端状态，成功后再执行
el.setAttribute('data-star', 'active') - 页面加载时从 localStorage 或 API 读取真实状态，再同步到
data-star属性 - 不要用
data-star存 JSON 字符串，比如data-star='{"id":123,"ts":1723512345}'—— 解析失败风险高，且无法被 CSS 选择器利用
最易被忽略的一点：多个标签页共用同一收藏状态时，仅靠改 data-star 毫无意义，必须搭配 BroadcastChannel 广播变更，否则 A 页面点了星星，B 页面完全不知情。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
