单选按钮刷新后不记状态是HTML规范行为，需用localStorage手动保存和还原；监听change事件存name+value，DOMContentLoaded时读取并设置checked；注意name一致、value唯一及DOM加载时机。
页面刷新后单选按钮没记住选中状态
默认情况下，HTML <input type="radio"> 不会自动保存或恢复上次选择——浏览器只在表单提交或前进/后退时才可能恢复，刷新页面就清空了。这不是 bug，是规范行为。要“恢复”，得自己存、自己读。
用 localStorage 保存并还原选中值
这是最常用也最可靠的方式：监听用户点击，把 name 和 value 存进 localStorage；页面加载后，按 name 找到对应按钮，设 checked = true。
注意点：
-
name属性必须一致（同一组单选按钮靠它关联），存的时候建议用radio-${name}作 key，避免冲突 - 还原时得等 DOM 加载完成（
DOMContentLoaded或放在</body>前） - 如果同名按钮有多个，但
value相同，可能误标多个；确保每组内value唯一
// 保存
document.querySelectorAll('input[type="radio"]').forEach(radio => {
radio.addEventListener('change', () => {
if (radio.checked) {
localStorage.setItem(`radio-${radio.name}`, radio.value);
}
});
});
// 还原
document.addEventListener('DOMContentLoaded', () => {
document.querySelectorAll('input[type="radio"]').forEach(radio => {
const saved = localStorage.getItem(`radio-${radio.name}`);
if (saved === radio.value) {
radio.checked = true;
}
});
});
遇到 Uncaught TypeError: Cannot set property 'checked' of null
通常是因为脚本执行时 DOM 还没加载完，或者 selector 写错了（比如 name 拼错、大小写不一致、带空格）。检查这几处：
立即学习“前端免费学习笔记（深入）”；
- 确认
document.querySelectorAll('input[type="radio"]')确实拿到了元素（打印长度看看） - 确认 HTML 中所有同组单选按钮的
name完全一致（包括空格和大小写） - 不要在
<head>里直接运行还原逻辑，改用DOMContentLoaded或window.onload - 如果按钮是 JS 动态生成的，需在插入 DOM 后再执行还原逻辑
服务端渲染（如 PHP / SSR）场景下怎么处理
如果页面由后端生成，更简单：直接让后端根据上次提交/存储的值，在 HTML 中写死 checked 属性。例如 PHP：
<input type="radio" name="theme" value="dark" <?= $user_prefs['theme'] === 'dark' ? 'checked' : '' >>
这种方案不依赖 JS，兼容性好，且无闪烁问题。但要注意：如果用户用 JS 切换后没提交表单，后端无法感知新选择——所以前后端逻辑要对齐，比如切换时触发 AJAX 保存偏好。
本地存储和后端渲染不是互斥的，复杂应用常两者共存：JS 实时响应 + 后端兜底初始化。
