页面刷新后radio选中状态丢失是默认行为，需用localStorage手动存取恢复：监听change事件存储value，DOMContentLoaded后遍历同name radio比对并设checked；注意name唯一性及值存在性校验。
页面刷新后单选按钮（radio）选中状态丢失，不是浏览器 bug，而是默认行为——DOM 重载时只保留 HTML 中写死的 checked 属性，JS 动态设置的选中状态全被丢弃。要恢复，必须手动存取 + 主动赋值。
用 localStorage 捕获并恢复 radio 选中值
这是最常用、兼容性最好、且不依赖服务端的方法。关键在于：监听 change 事件存值，页面加载后读值并设 checked = true。
- 同一组
radio共享name，所以存储键建议用name做 key，比如localStorage.setItem('userStatus', 'active') - 恢复时不能只靠
querySelector('input[value="active"]')，得先查name下所有input[type="radio"]，再比对value和存储值 - 注意：若页面加载时 DOM 尚未就绪（如脚本放在
），需等DOMContentLoaded或用defer
// 存储
document.querySelectorAll('input[type="radio"]').forEach(radio =>
radio.addEventListener('change', () =>
localStorage.setItem(radio.name, radio.value)
)
);
// 恢复（在 DOM 加载完成后执行）
document.addEventListener('DOMContentLoaded', () => {
document.querySelectorAll('input[type="radio"]').forEach(radio => {
const saved = localStorage.getItem(radio.name);
if (saved === radio.value) radio.checked = true;
});
});
radio 组名（name）冲突导致恢复失败
常见现象是“明明存了值，但刷新后没一个被选中”。根本原因往往不是代码逻辑错，而是多个 radio 组误用了相同 name，或某组里漏写了 name 属性。
- 浏览器按
name分组管理互斥关系，如果两个不同功能的单选组共用name="status"，它们会变成“一组”，导致恢复时互相覆盖 - 检查 DOM：每个
input[type="radio"]必须有name，且同组内值完全一致；不同组之间name必须不同 - 调试技巧：在控制台运行
document.querySelectorAll('input[name="yourName"]')，看返回节点数是否符合预期
为什么不用 form.reset() 或初始 checked 属性？
因为这两者都只认 HTML 静态定义，无法反映用户真实操作历史。
-
form.reset()只还原到页面首次加载时的checked状态，和你上次选了什么无关 - 硬编码
只能固定一个默认项，无法动态响应用户上次选择 - 如果表单由 JS 动态渲染（如 Vue/React 组件、AJAX 插入），HTML 中根本不会出现
checked属性，此时reset()和静态属性完全失效
真正可靠的恢复，永远依赖「用户操作时存」+「页面加载后取 + 手动设 checked」这个闭环。最容易被忽略的点是：没有验证 localStorage 中的值是否仍存在于当前 DOM 的 radio 列表中——比如后端改了选项，旧存储值已无效，强行设 checked 会导致无一选中，应加一层存在性判断。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
