如何在重新加载网页后在JavaScript中保留多个表单值？

Question

下面是我如何试图保留使用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中多个表单值？

Answer 1

我创建了一个小提琴，它似乎是工作： 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只适用于身体 see here

而且，我读到或者包装的onchange文件准备或附加一个事件监听器给它正确触发事件： event listener，ready event

我稍微修改程序。如果按下重新加载，它将从本地存储中获取值，而不是页面刷新时自动填充的值，这些值可以轻松更改。另外，我正在使用submit按钮而不是onchange。

我希望这有助于！