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

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

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

使用者痛点：

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

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

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