HTML中“加入题库”星标按钮需用button+data-favorited属性控制状态，图标用★/☆字符，颜色内联设置；JS用localStorage以"quiz-favorites"键存ID数组，页面加载后通过DOMContentLoaded遍历匹配并更新按钮状态。
HTML里怎么实现“加入题库”星标按钮
纯HTML做不到持久收藏，必须配合JavaScript存状态，否则点完刷新就丢。星标图标本身用★或☆字符最轻量，别一上来就引Font Awesome。
- 用
<button type="button"></button>而不是<a></a>，避免误触发跳转 - 初始状态靠
data-favorited="false"属性控制，别只靠class切换（后期JS读取更稳） - 图标颜色用
style="color: #ff6b35;"内联写，避免CSS未加载时白屏看不到星 - 示例：
<button type="button" data-favorited="false" onclick="toggleFavorite(123)">☆ 加入题库</button>
JavaScript怎么保存题目收藏状态
本地收藏优先用localStorage，别碰sessionStorage（关页就清空），也别默认上IndexedDB（小功能杀鸡用牛刀）。
-
localStorage键名建议固定为"quiz-favorites"，值存JSON数组如[123, 456] - 每次点击先
JSON.parse(localStorage.getItem("quiz-favorites")) || []，再push()或filter()，最后setItem - 注意
localStorage只能存字符串，直接setItem("quiz-favorites", [123])会存成"123"（变成字符串而非数组） - 别在
onclick里写大段逻辑，抽成function toggleFavorite(id)，方便后续加埋点或防抖
页面加载时如何恢复星标状态
不恢复=用户觉得功能失效。关键在DOM渲染完成后再查localStorage，否则querySelector找不到元素。
htmlppt.skill
下载
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
- 用
document.addEventListener("DOMContentLoaded", ...)，不是window.onload（后者等资源，太晚） - 遍历所有带
data-question-id的按钮，对比localStorage里的ID数组，匹配则改图标和data-favorited值 - 别用
innerHTML重写整个按钮——会丢失绑定的事件监听器，改textContent或firstChild.nodeValue更安全 - 示例逻辑：
const favs = JSON.parse(localStorage.getItem("quiz-favorites") || "[]");<br>document.querySelectorAll("[data-question-id]").forEach(btn => {<br> const id = Number(btn.dataset.questionId);<br> if (favs.includes(id)) {<br> btn.innerHTML = "★ 已收藏";<br> btn.dataset.favorited = "true";<br> }<br>});
为什么收藏状态有时不同步或消失
常见原因就三个：跨域、私密模式、手动清缓存。但最多见的是开发者自己踩坑。
立即学习“前端免费学习笔记（深入）”；
- Chrome无痕窗口默认禁用
localStorage，测试时别只用它——切回普通窗口验证 - 如果题目ID是字符串（如
"Q-001"），localStorage里存的却是数字123，includes()永远返回false - 没做异常捕获，
JSON.parse()遇到损坏数据直接报错中断脚本，整个恢复逻辑失效 - 多标签页操作时，一个页面改了
localStorage，另一个页面不会自动响应——需要监听storage事件手动更新
localStorage的容量限制（通常5MB）和同源策略才是长期卡点，但对几百道题的测验系统，先跑通比提前优化更重要。 
