radio选中状态丢失的根本原因是页面跳转导致document重建，表单控件重置；可通过localStorage手动存取value值、URL参数传递或服务端渲染时回填checked属性解决。
页面跳转后radio选中状态丢失的常见原因
根本问题不是radio本身不记状态，而是每次跳转都触发了新页面加载，document重建，所有表单控件恢复初始值。浏览器不会自动把radio的checked属性持久化到下一页——除非你主动保存并还原。
用localStorage手动存取radio的value值
这是最直接、兼容性好、不依赖后端的方式。关键在于：在跳转前存，页面加载后立即读并设回checked。
- 假设radio组名为
theme，每个 - 跳转前（比如点击链接或提交表单时）执行：
const selected = document.querySelector('input[name="theme"]:checked')?.value; if (selected) localStorage.setItem('theme', selected); - 页面加载后（建议放在
<script></script>中靠前位置）执行：const saved = localStorage.getItem('theme'); if (saved) document.querySelector(`input[name="theme"][value="${saved}"]`)?.checked = true; - 注意：如果radio初始没有
checked属性，且localStorage里也没有值，就保持未选中，符合预期
用URL参数传递radio值（适合简单跳转）
适用于A页跳B页这种明确路径、不涉及敏感数据的场景。比localStorage更“干净”，但需要自己拼接和解析URL。
- 跳转时构造链接：
const val = document.querySelector('input[name="mode"]:checked')?.value || ''; location.href = `page-b.html?mode=${encodeURIComponent(val)}`; - B页加载后读参：
const url = new URL(window.location); const mode = url.searchParams.get('mode'); if (mode) document.querySelector(`input[name="mode"][value="${mode}"]`)?.checked = true; - 缺点：如果用户手动刷新B页，参数还在，状态仍保留；但如果用户清空地址栏再进，就丢了
- 别用
GET表单自动提交——它会把所有字段都带上，容易污染URL，且不易控制哪些字段参与跳转
服务端渲染时从请求参数回填（SSR/PHP/Node等）
如果你的页面是服务端生成的（比如PHP模板、Next.js SSR），那就不该靠前端JS存取，而应在HTML输出阶段就把checked属性写进去。
- 例如PHP中：
<input type="radio" name="lang" value="zh" :>
- Node.js + EJS类似：
<input type="radio" name="size" value="m" checked>
- 重点：必须确保服务端能拿到跳转带过来的参数（如query string、session、cookie），否则无法判断该选谁
- 这个方案不依赖JS，首屏即正确，但要求前后端配合，纯静态HTML做不到
最容易被忽略的是：radio的name必须一致，且value不能含空格或特殊字符（尤其用URL传参时），否则querySelector匹配失败，看起来“存了但没生效”。另外，如果页面有多个同名radio组（比如分区域设置），记得加更精确的选择器前缀，避免误操作。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
