将表单数据保存到本地存储并在刷新时显示

我正在制作一个用户可以输入数据的表单.我想通过使用本地存储来保存这个日期.但是当我刷新页面时,只记住身高和体重.我一直坚持努力使性别,运动和生日也被记住.

    
    
    
    
    


    


        

            gender:

            
            Man

            
            Vrouw

            dateOfBirth:
            

            weight (in kg):
            

            height (in cm):
            

            Hoeveel keer doe je aan sport per week?
            
                Weinig of geen training, kantoorwerk
                Lichte training/sport 1-3 dagen per week
                Gemiddelde training/sport 3-5 dagen per week
                Zware training/sport 6-7 dagen per week
                Zware dagelijkse training/sport plus lichamelijk werk
            

            


        

    

问候

您使脚本变得复杂.试试这个.工作的jsfiddle

如果您使用jQuery一次,请不要将其与纯Javascript混合使用,例如document.getElementById().并且不要创建height存储变量$('#height').val(),可以直接使用它.代码更具可读性.

$(document).ready(function() {
    $(window).unload(saveSettings);
    loadSettings();
});

function loadSettings() {
    $('#height').val(localStorage.height);
    $('#weight').val(localStorage.weight);
    $('#dateOfBirth').val(localStorage.dateOfBirth);
    $('input[value="' + localStorage.gender + '"]').prop('checked', true);
    $("#sportive").val(localStorage.sportive);
}

function saveSettings() {
    localStorage.height = $('#height').val();
    localStorage.weight = $('#weight').val();
    localStorage.dateOfBirth = $('#dateOfBirth').val();
    localStorage.sportive = $("#sportive").val();
    localStorage.gender = $('input[type=radio]:checked').val();
}

更新:如果您使用的是jQuery 3,则卸载会抛出错误.您应该使用此代替:

document.getElementById()