如何在重新加载网页后在 JavaScript 中保留多个表单值?
How to retain multiple form values in JavaScript after reloading a web page?
下面是我尝试使用 JavaScript 保留表单值的方法,但它不起作用:
<form action="" method="Post" onload="saveData();">
<Label>1. What is your favourite browser?</Label>
<select id="browserValue">
<option value="Internet Explorer">Internet Explorer</option>
<option value="Firefox">Firefox</option>
<option value="Chrome">Chrome</option>
<option value="Opera">Opera</option>
<option value="Safari">Safari</option>
</select>
<br>
<br>
<Label>2. What is your favourite food group?</Label>
<select id="foodValue">
<option value="Meats/Alternatives">Meats/Alternatives</option>
<option value="Vegetables">Vegetables</option>
<option value="Dairy Products">Dairy Products</option>
<option value="Fruits">Fruits</option>
<option value="Grains">Grains</option>
<option value="Confections (Junk Food)">Confections (Junk Food)</option>
</select>
<br>
<br>
<Label>3. What is your favourite game genre?</Label>
<select id="gameValue">
<option value="FPS">First Person Shooter (Ex: Halo, Call of Duty)</option>
<option value="TPS">Third Person Shooter (Ex: Ghost Recon, Gear of War)</option>
<option value="Puzzle">Puzzle (Ex: Sudoku, Minesweeper)</option>
<option value="Sim">Simulation (Ex: Minecraft, SimCity)</option>
<option value="Other">Other (Please specify the genre)</option>
</select>
<br>
<br>
<input type="button" value="Submit">
</form>
<script>
function saveData(){
var q1 = document.getElementById("browserValue").onChange().value;
var a = localStorage.setItem("browsers", q1);
var q2 = document.getElementById("foodValue").onChange().value;
var b = localStorage.setItem("food", q2);
var q3 = document.getElementById("gameValue").onChange().value;
var c = localStorage.setItem("game", q3);
}
document.getElementById("browserValue").value = a;
document.getElementById("foodValue").value = b;
document.getElementById("gameValue").value = c;
</script>
如何在重新加载网页后在 JavaScript 中保留多个表单值?
我创建了一个 fiddle,它似乎可以正常工作:
http://jsfiddle.net/4hsxjhnd/1/
HTML
<form action="" method="Post">
<Label>1. What is your favourite browser?</Label>
<select id="browserValue">
<option value="Internet Explorer">Internet Explorer</option>
<option value="Firefox">Firefox</option>
<option value="Chrome">Chrome</option>
<option value="Opera">Opera</option>
<option value="Safari">Safari</option>
</select>
<br>
<br>
<Label>2. What is your favourite food group?</Label>
<select id="foodValue">
<option value="Meats/Alternatives">Meats/Alternatives</option>
<option value="Vegetables">Vegetables</option>
<option value="Dairy Products">Dairy Products</option>
<option value="Fruits">Fruits</option>
<option value="Grains">Grains</option>
<option value="Confections (Junk Food)">Confections (Junk Food)</option>
</select>
<br>
<br>
<Label>3. What is your favourite game genre?</Label>
<select id="gameValue">
<option value="FPS">First Person Shooter (Ex: Halo, Call of Duty)</option>
<option value="TPS">Third Person Shooter (Ex: Ghost Recon, Gear of War)</option>
<option value="Puzzle">Puzzle (Ex: Sudoku, Minesweeper)</option>
<option value="Sim">Simulation (Ex: Minecraft, SimCity)</option>
<option value="Other">Other (Please specify the genre)</option>
</select>
<br>
<br>
<input type="button" value="Submit" onclick="savecode()">
<input type="button" value="Reload" onclick="getcode()">
</form>
JS:
//Script
function savecode()
{
localStorage.setItem("browsers", $("#browserValue").val());
localStorage.setItem("food", $("#foodValue").val());
localStorage.setItem("game", $("#gameValue").val());
}
function getcode()
{
alert(localStorage.getItem("browsers"));
document.getElementById("browserValue").value = localStorage.getItem("browsers");
document.getElementById("foodValue").value = localStorage.getItem("food");
document.getElementById("gameValue").value = localStorage.getItem("game");
}
我在解决这个问题时学到的一些东西是:onload 只适用于 body
see here
此外,我还读到了关于将 onchange 包装在 document ready 中或将事件侦听器附加到它以正确触发事件的信息:
event listener, ready event
我稍微修改了程序。如果您按下重新加载,它将从本地存储中获取值,而不是在页面刷新时自动填充的值,这可以很容易地更改。另外,我使用的是提交按钮而不是 onchange。
希望对您有所帮助!
下面是我尝试使用 JavaScript 保留表单值的方法,但它不起作用:
<form action="" method="Post" onload="saveData();">
<Label>1. What is your favourite browser?</Label>
<select id="browserValue">
<option value="Internet Explorer">Internet Explorer</option>
<option value="Firefox">Firefox</option>
<option value="Chrome">Chrome</option>
<option value="Opera">Opera</option>
<option value="Safari">Safari</option>
</select>
<br>
<br>
<Label>2. What is your favourite food group?</Label>
<select id="foodValue">
<option value="Meats/Alternatives">Meats/Alternatives</option>
<option value="Vegetables">Vegetables</option>
<option value="Dairy Products">Dairy Products</option>
<option value="Fruits">Fruits</option>
<option value="Grains">Grains</option>
<option value="Confections (Junk Food)">Confections (Junk Food)</option>
</select>
<br>
<br>
<Label>3. What is your favourite game genre?</Label>
<select id="gameValue">
<option value="FPS">First Person Shooter (Ex: Halo, Call of Duty)</option>
<option value="TPS">Third Person Shooter (Ex: Ghost Recon, Gear of War)</option>
<option value="Puzzle">Puzzle (Ex: Sudoku, Minesweeper)</option>
<option value="Sim">Simulation (Ex: Minecraft, SimCity)</option>
<option value="Other">Other (Please specify the genre)</option>
</select>
<br>
<br>
<input type="button" value="Submit">
</form>
<script>
function saveData(){
var q1 = document.getElementById("browserValue").onChange().value;
var a = localStorage.setItem("browsers", q1);
var q2 = document.getElementById("foodValue").onChange().value;
var b = localStorage.setItem("food", q2);
var q3 = document.getElementById("gameValue").onChange().value;
var c = localStorage.setItem("game", q3);
}
document.getElementById("browserValue").value = a;
document.getElementById("foodValue").value = b;
document.getElementById("gameValue").value = c;
</script>
如何在重新加载网页后在 JavaScript 中保留多个表单值?
我创建了一个 fiddle,它似乎可以正常工作: http://jsfiddle.net/4hsxjhnd/1/
HTML
<form action="" method="Post">
<Label>1. What is your favourite browser?</Label>
<select id="browserValue">
<option value="Internet Explorer">Internet Explorer</option>
<option value="Firefox">Firefox</option>
<option value="Chrome">Chrome</option>
<option value="Opera">Opera</option>
<option value="Safari">Safari</option>
</select>
<br>
<br>
<Label>2. What is your favourite food group?</Label>
<select id="foodValue">
<option value="Meats/Alternatives">Meats/Alternatives</option>
<option value="Vegetables">Vegetables</option>
<option value="Dairy Products">Dairy Products</option>
<option value="Fruits">Fruits</option>
<option value="Grains">Grains</option>
<option value="Confections (Junk Food)">Confections (Junk Food)</option>
</select>
<br>
<br>
<Label>3. What is your favourite game genre?</Label>
<select id="gameValue">
<option value="FPS">First Person Shooter (Ex: Halo, Call of Duty)</option>
<option value="TPS">Third Person Shooter (Ex: Ghost Recon, Gear of War)</option>
<option value="Puzzle">Puzzle (Ex: Sudoku, Minesweeper)</option>
<option value="Sim">Simulation (Ex: Minecraft, SimCity)</option>
<option value="Other">Other (Please specify the genre)</option>
</select>
<br>
<br>
<input type="button" value="Submit" onclick="savecode()">
<input type="button" value="Reload" onclick="getcode()">
</form>
JS:
//Script
function savecode()
{
localStorage.setItem("browsers", $("#browserValue").val());
localStorage.setItem("food", $("#foodValue").val());
localStorage.setItem("game", $("#gameValue").val());
}
function getcode()
{
alert(localStorage.getItem("browsers"));
document.getElementById("browserValue").value = localStorage.getItem("browsers");
document.getElementById("foodValue").value = localStorage.getItem("food");
document.getElementById("gameValue").value = localStorage.getItem("game");
}
我在解决这个问题时学到的一些东西是:onload 只适用于 body see here
此外,我还读到了关于将 onchange 包装在 document ready 中或将事件侦听器附加到它以正确触发事件的信息: event listener, ready event
我稍微修改了程序。如果您按下重新加载,它将从本地存储中获取值,而不是在页面刷新时自动填充的值,这可以很容易地更改。另外,我使用的是提交按钮而不是 onchange。
希望对您有所帮助!