无法从HTML表单性别单选框取回SessionStorage中存储的值

嘿，我一眼就发现你遇到的问题根源了——sessionStorage存储的所有值都会被自动转换成字符串类型，而你在取回性别单选框的值时，用了布尔值true去做比较，这就导致判断逻辑失效了。

具体原因 #

当你把布尔值true/false存入sessionStorage时，它会被转成字符串"true"/"false"。而你在getDetails里写的sessionStorage.getItem("female") == true，JavaScript在做类型转换时，字符串"true"会被转换成NaN，和布尔值true比较的结果是false，所以单选框永远不会被勾选上。

快速修复代码 #

直接修改getDetails里的性别判断部分，改成判断取回的字符串是否等于"true"就行：

function getDetails(){ 
  if (typeof(Storage)!=="undefined"){ 
    // 姓名、出生日期字段保持不变
    if (sessionStorage.getItem("firstname") !== null){ 
      document.getElementById("firstname").value = sessionStorage.getItem("firstname"); 
    } 
    if (sessionStorage.getItem("lastname") !== null){ 
      document.getElementById("lastname").value = sessionStorage.getItem("lastname"); 
    } 
    if (sessionStorage.getItem("dateofbirth") !== null){ 
      document.getElementById("dateofbirth").value = sessionStorage.getItem("dateofbirth"); 
    } 

    // 修复性别单选框的判断逻辑
    document.getElementById("female").checked = sessionStorage.getItem("female") === "true"; 
    document.getElementById("male").checked = sessionStorage.getItem("male") === "true"; 
    document.getElementById("other").checked = sessionStorage.getItem("other") === "true"; 
  }
}

更优雅的优化方案 #

如果你想让代码更简洁、更易维护，可以把所有表单数据打包成一个对象，用JSON序列化后存入sessionStorage，取回时再反序列化，这样就能完美保留所有数据的类型：

// 重构setDetails函数
function setDetails(firstname, lastname, dateofbirth, female, male, other) { 
  if (typeof(Storage)!=="undefined"){ 
    const formData = {
      firstname,
      lastname,
      dateofbirth,
      female,
      male,
      other
    };
    sessionStorage.setItem("formData", JSON.stringify(formData)); 
  } 
}

// 重构getDetails函数
function getDetails(){ 
  if (typeof(Storage)!=="undefined"){ 
    const storedData = sessionStorage.getItem("formData");
    if (storedData) {
      const formData = JSON.parse(storedData);
      document.getElementById("firstname").value = formData.firstname;
      document.getElementById("lastname").value = formData.lastname;
      document.getElementById("dateofbirth").value = formData.dateofbirth;
      document.getElementById("female").checked = formData.female;
      document.getElementById("male").checked = formData.male;
      document.getElementById("other").checked = formData.other;
    }
  }
}

这样处理后，不仅解决了类型转换的问题，以后如果要添加新的表单字段，也只需要在对象里加个属性就行，不用再单独写setItem和getItem啦。

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