javascript - 无法检索 html 形式的性别单选输入值

Question

我正在尝试将用户输入的值保存在 session 存储中，然后检索它们。除单选选项的值外，所有值都会被检索。这是性别输入。

它适用于名字、姓氏和出生日期，但性别保持为空。 我可以看到所有值都保存在 session 存储中，包括性别。如果我选择“男性”，“男性”将存储为 true，其余为 false。

function validate(){

    //get form values
    var firstname = document.getElementById("firstname").value;
    var lastname = document.getElementById("lastname").value;
    var dateofbirth = document.getElementById("dateofbirth").value;

    var female = document.getElementById("female").checked;
    var male = document.getElementById("male").checked;
    var other = document.getElementById("other").checked;

      else {
         setDetails(firstname, lastname, dateofbirth, female, male, other);
    }
}

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");   
    }
    if (sessionStorage.getItem("female") == true){  
        document.getElementById("female").checked = sessionStorage.getItem("female");   
    }
    if (sessionStorage.getItem("male") == true){  
        document.getElementById("male").checked = sessionStorage.getItem("male");   
    }
    if (sessionStorage.getItem("other") == true){   
        document.getElementById("other").checked = sessionStorage.getItem("other"); 
    }
}

function setDetails(firstname, lastname, dateofbirth, female, male, other) {
    if (typeof(Storage)!=="undefined"){
        sessionStorage.setItem("firstname", firstname);
        sessionStorage.setItem("lastname", lastname);
        sessionStorage.setItem("dateofbirth", dateofbirth);
        sessionStorage.setItem("female", female);
        sessionStorage.setItem("male", male);
        sessionStorage.setItem("other", other);
       }
}

Answer 1

保存在 sessionStorage 和 localStorage 中的值始终是字符串。当您保存 bool 值 true/false 时，您实际上保存的是“true”或“false”字符串。

因此，当您设置输入的“checked”值时，需要将新值转换为 bool 值。例如:

if (sessionStorage.getItem("female") === 'true') {  
   document.getElementById("female").checked = sessionStorage.getItem("female") === 'true';  
}

或者更好:

var female = sessionStorage.getItem("female") === 'true';

if (female) {  
   document.getElementById("female").checked = female;  
}