页面加载时需手动从 localStorage 读取并设置 radio 勾选状态，关键是在 DOM 就绪后立即同步：按 name 分组，用 localStorage.getItem('radio_${name}') 获取值，匹配对应 radio 元素并设 checked=true；用户切换时监听 change 事件及时保存，key 需含清洗后的 name 以避免冲突；所有操作须 try-catch 处理兼容性问题。
页面加载时从 localStorage 读取并设置 radio 勾选状态
radio 没有默认的“自动恢复”机制，必须手动读取存储值并调用 checked 属性赋值。关键不是“监听变化”，而是“在 DOM 就绪后立即同步状态”。常见错误是脚本执行太早（比如放在 里且没加 defer），导致 document.querySelectorAll('input[type="radio"]') 查不到元素。
实操建议：
- 把恢复逻辑放在
底部，或用DOMContentLoaded事件包裹 - 按
name分组处理：同一组 radio 共享 name，只需恢复该 name 对应的已存 value - 用
localStorage.getItem('radio_${name}')读取，避免硬编码 key 名 - 找到匹配
value的 radio 后，直接设element.checked = true（不要用click()或dispatchEvent，不必要且可能触发重复逻辑）
用户切换 radio 时及时存入 localStorage
不能只依赖表单提交时机保存——用户可能没点提交就刷新了。必须在每次选择变化时立刻落盘。但注意：radio 的 change 事件只在真正切换选项时触发，比 input 更可靠；而 click 事件在重复点击已选 radio 时也会触发，造成冗余写入。
实操建议：
- 对每个 radio 组的任意一个元素绑定
change事件（推荐委托到父容器，减少监听器数量） - 事件回调中，用
e.target.name和e.target.value获取当前组名和选中值 - 执行
localStorage.setItem('radio_${name}', value)，value 是字符串，无需 JSON 化 - 如果该组初始无选中项（
value为空），仍要存空字符串，否则后续读取时getItem返回null，无法区分“未选”和“未存”
多个 radio 组共存时的 key 设计与冲突预防
key 冲突会导致 A 组的选择覆盖 B 组的存储。比如都用 localStorage.setItem('selected', value)，必然串扰。必须把 name 纳入 key，但要注意 name 可能含特殊字符（空格、点、括号等）。
实操建议：
- 使用
name.replace(/[^a-z0-9_\-]/gi, '_')简单清洗，或直接用原 name（现代浏览器 localStorage key 支持任意 UTF 字符，只要不是 null 字节） - 统一前缀，如
radio_${encodeURIComponent(name)}，解码时用decodeURIComponent() - 避免用
id或data-*属性生成 key——name 才是语义上分组的唯一依据 - 调试时可在控制台运行
Object.keys(localStorage).filter(k => k.startsWith('radio_'))快速查看已存项
兼容性与边界情况：无 JS、隐私模式、存储满
localStorage 在无痕窗口（Safari/Chrome 隐私模式）下可能抛 QuotaExceededError 或静默失败；禁用 JS 时自然不生效；某些 iOS 版本在页面卸载前来不及写入。
实操建议：
- 所有
localStorage操作必须包在try...catch中，捕获SecurityError和QuotaExceededError - 写入失败时可降级为
sessionStorage（仅当前会话有效），或记录到内存变量（刷新即丢） - 读取时若
getItem返回null，视为“无历史选择”，不报错也不强制设默认项——尊重用户原始 HTML 的checked属性 - 不要在
beforeunload里强行写入，该事件时间窗口极短，大概率失败
最易被忽略的是：radio 组内多个选项的 value 值必须互异，且与 localStorage 存的字符串完全一致（包括大小写、空格）。哪怕 HTML 里写的是 value="yes"，JS 却存了 "Yes"，恢复时就找不到匹配项。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
