如何实现表单单选按钮刷新后值不丢失的持久化存储？

一、问题背景与使用者痛点

在实际项目中，表单往往包含很多输入框、下拉框还有单选/复选按钮。使用者在填写过程中，如果误操作导致页面刷新，所有已选的内容都会被清空。

使用者痛点：

• 已勾选的单选按钮瞬间恢复为默认未选状态，需要重新点击。不过，
• 数据丢失导致重复操作。降低使用体验，甚至可能导致信息填写错误。
• 如果是关键业务流程，一次刷新就可能造成业务中断。

二、解决思路：利用 localStorage 持久化单选按钮状态

localStorage 是浏览器提供的键值对存储方案。容量约 5 MB，且数据在页面关闭后仍然保留。可以在使用者点击单选按钮时把当前选择写入 localStorage页面重新加载时再读取并恢复勾选状态。

1. HTML 表单结构

 Aanwezig


 Afwezig

2. JavaScript 实现持久化

// 等待 DOM 加载完成
document.addEventListener {
const STORAGE_KEY = 'radio_user_1_selected';const radios = document.querySelectorAll;老实说，// ① 页面加载时读取本地存储并恢复勾选状态
const savedValue = localStorage.getItem;if {
radios.forEach {
if {
rb.checked = true;console.log，}
});}
// ② 为每个单选按钮绑定 change 事件，实时写入 localStorage
radios.forEach {
rb.addEventListener {
if {
localStorage.setItem;console.log，}
});})，});

三、完整示例

考勤状态选择

 Aanwezig
 Afwezig

四、常见问题与注意事项

• 多个同名单选组怎么办？老实说， 每个同名组只需要一个唯一的 SOTRAGE_KEY 即可。
• 切换页面或更换域名会丢失数据吗？ localStorage 的作用域是“同源”，跨域访问不到。
• 如何清除已经保存的值？ 调用 localStorage.removeItem;
• 是否会影响表单提交？ 不会，上述代码仅在前端做“记忆”，提交时仍然走正常的表单提交流程。
• 兼容性如何？ IE8 及以下不支持 localStorage

五、——让“刷新也不怕”成为真实体验

通过简单几行 JavaScript。把使用者最终一次点击的单选值写入浏览器本地存储，并在页面加载时自动读取并恢复勾选状态，就能解决掉因误刷新导致的数据丢失问题。不过，此方案无需后端配合，轻量且易于维护。是大多数 Web 应用让使用者用起来更舒服的首选技巧。

)