HTML表单无法正确回显用户选择，求问题排查方案

第一个函数完全无法回显的常见原因 #

• 存储/读取键名不匹配：检查localStorage.setItem()和getItem()的键名是否完全一致，比如存的时候用"location"，读的时候写成"loc"就会读不到数据。
• DOM元素选择错误：核对代码里的选择器（比如getElementById的ID、querySelector的选择器语法）是否和HTML里的元素属性完全对应，拼错一个字符就找不到元素。
• 函数执行时机过早：如果dataLoad函数在DOM还没渲染完成时就执行（比如script标签放在head里没加监听），此时表单元素还不存在，自然没法赋值。

第二个函数部分回显失效的针对性排查 #

针对location、NS、EW、dateMode这些单选按钮的问题，重点查以下几点：

• 存储值与单选按钮value不匹配：打开浏览器控制台（F12）→ 进入Application面板→ 查看localStorage里对应键的值，是否和HTML中单选按钮的value属性完全一致。比如NS单选的value是"N"/"S"，但存储的值是"North"，就没法匹配选中。
• 单选组遍历逻辑缺失：处理单选组时，必须遍历同name下的所有input元素，找到匹配value的那个再设置checked=true。如果代码只操作了单选组的第一个元素，其他选项自然没法回显。正确示例：

const dateModeRadios = document.querySelectorAll('input[name="dateMode"]');
const storedMode = localStorage.getItem('dateMode');
dateModeRadios.forEach(radio => {
  radio.checked = (radio.value === storedMode);
});

• 动态元素未等待加载：如果location、NS这些单选是通过JS动态生成的，而dataLoad函数在元素生成前就执行了，会找不到元素导致回显失败；而subhMode这类静态写在HTML里的元素不受影响。
• 存储逻辑未覆盖所有元素：检查这些有问题的单选按钮是否绑定了change事件，确保用户切换选项时能及时把值存入localStorage。比如：

document.querySelectorAll('input[name="NS"]').forEach(radio => {
  radio.addEventListener('change', () => {
    localStorage.setItem('NS', radio.value);
  });
});

如果没绑定事件，用户选完后值没存进去，返回页面自然读不到最新选择。

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