页面刷新后 radio 选中状态丢失是浏览器默认行为，需用 localStorage 存取 value 并在 DOMContentLoaded 后按 name 和 value 精准恢复；监听 change 事件最可靠，name 必须拼写一致且同组唯一。
页面刷新后 radio 选中状态丢失是浏览器默认行为，不是 bug，必须手动用 localStorage 存取 + 主动赋值才能恢复。
监听 change 事件存 value，不是 input 或 click
单选按钮只有在真正切换选项时才触发 change，比 input 更精准，也比 click 更可靠（避免重复触发）。不要监听整个表单或 document，而是精确绑定到每个 radio 元素上。
-
change在用户从一个选项切到另一个时才触发，天然适配单选逻辑 - 若监听
input，radio不会响应（它不支持实时输入） - 若监听
click，可能在未真正改变选中状态时就触发（比如点已选中的项） - 存储键建议用
radio.name，值就是radio.value，例如localStorage.setItem('payment', 'alipay')
DOMContentLoaded 后遍历同 name radio 并比对 value
不能只靠 querySelector('input[value="xxx"]') 直接设 checked，因为可能有多个不同 name 的 radio 共存，且 value 可能重复。必须先限定 name 范围，再逐个比对。
- 用
document.querySelectorAll('input[type="radio"]')获取全部 radio - 对每个 radio，读取
localStorage.getItem(radio.name) - 仅当
saved === radio.value时才设radio.checked = true - 如果脚本放在
里，必须等DOMContentLoaded，否则 DOM 还没加载，查不到元素
name 属性必须唯一且一致，否则恢复必然失败
“存了值但刷新后没一个被选中”——90% 是 name 问题。浏览器靠 name 分组，name 写错、大小写不一致、动态生成漏赋值，都会导致分组失效，进而让恢复逻辑找不到目标组。
- 检查是否所有同组 radio 都写了
name，且拼写完全一致（如userStatus≠userstatus） - Vue/React 中注意绑定是否出错，比如
:name="'profile_' + section"导致每组 name 动态不同 - 服务端渲染时，确认模板中
name没被条件逻辑意外跳过 - 如果某组只有一个 radio，它永远无法被“选中”（因为没有互斥对象），这种设计本身就有问题
最易被忽略的点：恢复逻辑运行时，DOM 必须已就绪，且 name 和 value 必须与存储时完全一致——字符串相等，不自动类型转换，也不忽略空格。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
