表单localStorage存储回显异常：单选按钮默认选中问题求助

核心问题分析 #

你用innerHTML赋值的思路完全错了——表单控件的选中/输入状态是通过自身属性（比如单选的checked、下拉的selected、输入框的value）控制的，直接修改HTML内容根本同步不了控件状态。

正确实现步骤 #

1. 先确保CacheData()能准确捕获所有表单值 #

先把缓存函数写对，确保不同类型控件的值都能被正确收集：

function CacheData() {
  const formCache = {
    // Location字段集示例：单选+下拉
    locationRadio: document.querySelector('input[name="location-radio"]:checked')?.value,
    locationDropdown: document.getElementById('location-dropdown').value,
    // Date字段集示例：日期输入框
    datePicker: document.getElementById('date-picker').value,
    // Prayers字段集示例：单选+文本框
    prayerOption: document.querySelector('input[name="prayer-option"]:checked')?.value,
    prayerText: document.getElementById('prayer-text').value
  };
  localStorage.setItem('formCache', JSON.stringify(formCache));
}

• 单选按钮通过querySelector('input[name="xxx"]:checked')获取选中值
• 下拉、输入框直接取value属性即可

2. 重写dataLoad()实现正确回显 #

放弃innerHTML，针对每种控件类型设置对应属性：

function dataLoad() {
  const cachedData = JSON.parse(localStorage.getItem('formCache'));
  if (!cachedData) return; // 无缓存则保留默认值

  // 处理Location字段集的单选按钮
  const locationRadios = document.querySelectorAll('input[name="location-radio"]');
  locationRadios.forEach(radio => {
    radio.checked = radio.value === cachedData.locationRadio;
  });
  // 处理Location下拉选择
  document.getElementById('location-dropdown').value = cachedData.locationDropdown;

  // 处理Date字段集的日期输入框
  document.getElementById('date-picker').value = cachedData.datePicker;

  // 处理Prayers字段集的单选按钮
  const prayerRadios = document.querySelectorAll('input[name="prayer-option"]');
  prayerRadios.forEach(radio => {
    radio.checked = radio.value === cachedData.prayerOption;
  });
  // 处理Prayers文本输入框
  document.getElementById('prayer-text').value = cachedData.prayerText;
}

3. 页面加载时触发回显 #

在DOM加载完成后调用回显函数：

document.addEventListener('DOMContentLoaded', dataLoad);

关键注意事项 #

• 单选/复选框必须通过设置checked布尔值控制选中状态，不能靠修改HTML结构
• 下拉框直接设置value即可匹配对应选项（要确保选项的value和缓存值完全一致）
• 输入框直接赋值value属性，比修改innerHTML可靠得多
• 缓存时要处理null/undefined场景（比如用户未选中单选按钮的情况）

内容的提问来源于stack exchange，提问作者Youssef Ismail