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

Posted

技术标签:

【中文标题】将表单数据保存到本地存储并在刷新时显示【英文标题】:Saving form data to local storage and show it on refresh 【发布时间】:2015-02-26 17:44:23 【问题描述】:

我正在制作一个表单,用户可以在其中输入他们的数据。我希望通过使用本地存储来保存这个日期。但是当我刷新页面时,仍然会记住身高和体重。而且我一直在努力让性别、运动和生日也被记住。

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0rc2/jquery.mobile-1.0rc2.min.css" />
    <title>Test</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/mobile/1.0rc2/jquery.mobile-1.0rc2.min.js"></script>
    <script>
        $(document).ready(function() 
            $(window).unload(saveSettings);
            loadSettings();
        );

        function loadSettings() 
            $('#height').val(localStorage.height);
            $('#weight').val(localStorage.weight);
            $('#dateOfBirth').val(localStorage.dateOfBirth);
            $('input[type=radio]:checked').val(localStorage.gender);
            $("#sportive").find("option[value=" + localStorage.sportive + "]").attr("selected", "selected");
        

        function saveSettings() 
            var height = document.getElementById("height").value;
            var weight = document.getElementById("weight").value;
            var sportive = document.getElementById("sportive").value;
            var gender = $('input[type=radio]:checked').val();
            var dateOfBirth = document.getElementById("dateOfBirth").val();

            localStorage.height = height;
            localStorage.weight = weight;
            localStorage.dateOfBirth = dateOfBirth;
            localStorage.sportive = sportive;
            localStorage.gender = gender;
        


    </script>
</head>
<body>
    <div data-role="content">

        <form id="myForm" >

            gender:

            <input id="man" type="radio" name="gender" value="Man" >
            <label for="man">Man</label>

            <input id="vrouw" type="radio" name="gender" value="Vrouw">
            <label for="vrouw" >Vrouw</label>

            dateOfBirth:
            <input type="date" id="dateOfBirth" name="datum" required />

            weight (in kg):
            <input type="number" id="weight" name="weight" required />

            height (in cm):
            <input type="number" id="height" name="height" required />

            Hoeveel keer doe je aan sport per week?
            <select id="sportive" name="sport">
                <option value="1.2" >Weinig of geen training, kantoorwerk</option>
                <option value="1.375">Lichte training/sport 1-3 dagen per week</option>
                <option value="1.55" >Gemiddelde training/sport 3-5 dagen per week</option>
                <option value="1.725" >Zware training/sport 6-7 dagen per week</option>
                <option value="1.9" >Zware dagelijkse training/sport plus lichamelijk werk</option>
            </select>

            <br />

        </form>

    </div>
</body>

问候

【问题讨论】:

【参考方案1】:

您正在使您的脚本复杂化。尝试这个。工作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,unload 会抛出一个错误。你应该改用这个:

$(window).on('unload', function()
    saveSettings();
    loadSettings();
);

【讨论】:

以上是关于将表单数据保存到本地存储并在刷新时显示的主要内容,如果未能解决你的问题,请参考以下文章

使用 initialValues 属性将本地存储值持久化到 redux 表单字段中

将号码数据保存到本地存储

将输入值保存到本地存储并在不同的页面上检索它

将日期保存到本地存储

从本地存储中一一检索数组列表

Ngrx商店刷新页面后获取用户数据