单选按钮组必须用 value 属性标识选项，name 相同构成一组，仅一个 checked；value 需唯一、可序列化、语义清晰；localstorage 以 name 为 key、value 为值；需手动监听 storage 事件同步跨标签页状态。
单选按钮组的 value 值必须唯一且可序列化
本地存储（localStorage）只能存字符串，所以必须用 radio 的 value 属性来标识选项，不能依赖 id 或 name。如果多个 input[type="radio"] 共享同一个 name，它们就构成一组，此时只有被选中的那个有 checked 状态——这正是我们读写的关键依据。
常见错误是给所有 radio 写一样的 value（比如都写 "on"），结果取出来全是同一个值，无法区分选中项。
-
value应该语义清晰、无空格、无特殊字符，例如"option-a"、"dark"、"2024" - 确保同一组 radio 的
name完全一致（包括大小写和空格） - 初始页面加载时，不要用
checked属性硬编码默认值，否则会和 localStorage 冲突；应由 JS 统一控制
用 name 作为 localStorage 的 key，value 作为存储值
每个单选按钮组逻辑上是一个独立状态单元，最自然的 key 就是它的 name。这样既避免命名冲突，也方便后续扩展多组保存。
示例 HTML：
<div> <label><input type="radio" name="theme" value="light"> 浅色</label> <label><input type="radio" name="theme" value="dark"> 深色</label> </div>
对应 JS 保存逻辑：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
document.querySelectorAll('input[type="radio"][name="theme"]').forEach(radio => {
radio.addEventListener('change', () => {
if (radio.checked) {
localStorage.setItem('theme', radio.value);
}
});
});
页面加载时用 getAttribute('name') 安全还原状态
不能直接用 document.getElementsByName() 获取 radio 集合再遍历，因为返回的是 NodeList，且某些旧浏览器中它不实时响应 DOM 变化。更稳妥的方式是用 querySelectorAll + getAttribute('name') 匹配，再逐个比对 value。
还原代码示例：
function restoreRadioGroup(name) {
const saved = localStorage.getItem(name);
if (saved === null) return;
document.querySelectorAll(`input[type="radio"][name="${name}"]`).forEach(radio => {
if (radio.value === saved) {
radio.checked = true;
}
});
}
restoreRadioGroup('theme');
- 注意：不要用
radio.getAttribute('value')，直接用radio.value更可靠（尤其在动态设置后） - 如果页面有多个 radio 组，对每组调用一次
restoreRadioGroup('xxx')即可 - 建议把还原逻辑放在
DOMContentLoaded里，确保 DOM 已就绪
localStorage.setItem 触发 storage 事件但 radio 不自动同步
如果你在其他标签页或脚本中调用了 localStorage.setItem('theme', 'dark')，当前页的 radio 不会自动更新——storage 事件只通知变化，不触发 UI 反馈。必须手动监听并设置 checked。
补充监听逻辑：
window.addEventListener('storage', (e) => {
if (e.key === 'theme') {
document.querySelectorAll('input[type="radio"][name="theme"]').forEach(radio => {
radio.checked = (radio.value === e.newValue);
});
}
});
这个细节容易被忽略：单页内操作能自洽，但跨标签页或调试时改了 localStorage，界面就“掉线”了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
