jQuery 将表单数据保存到本地存储并在刷新时显示
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27707501/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Saving form data to local storage and show it on refresh
提问by user3141908
I am making a form where users can input their data. I'd like for this date to be saved by use of local storage. But when i refresh the page only height and weight are still remembered. And i have been quite stuck on trying to make gender , sportivity and birthdate be remembered as well.
我正在制作一个表格，用户可以在其中输入他们的数据。我希望通过使用本地存储来保存此日期。但是当我刷新页面时，只记得高度和重量。而且我一直在努力让性别、运动性和生日也被记住。
<!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>
greetings
你好
回答by vaso123
You are complicating your script. Try this. Working JSFIDDLE
您正在使您的脚本复杂化。尝试这个。工作JSFIDDLE
If you are using jQuery once, do not mix it with pure javascript, like document.getElementById(). And do not create a heightvariable to store the $('#height').val(), you can use this directly. Code is more readable.
如果您使用过一次 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();
}
Update: If you are using jQuery 3, unload will throw an error. You should use this instead:
更新：如果您使用的是 jQuery 3，则卸载会引发错误。你应该改用这个：
$(window).on('unload', function(){
saveSettings();
loadSettings();
});
