HTML怎么创建测验题目收藏功能_HTML“加入题库”星标按钮【介绍】-html教程-PHP中文网

HTML中“加入题库”星标按钮需用button+data-favorited属性控制状态，图标用★/☆字符，颜色内联设置；JS用localStorage以"quiz-favorites"键存ID数组，页面加载后通过DOMContentLoaded遍历匹配并更新按钮状态。

html怎么创建测验题目收藏功能_html“加入题库”星标按钮【介绍】

HTML里怎么实现“加入题库”星标按钮

纯HTML做不到持久收藏，必须配合JavaScript存状态，否则点完刷新就丢。星标图标本身用★或☆字符最轻量，别一上来就引Font Awesome。

用而不是，避免误触发跳转
初始状态靠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>});