如何在重新加載網頁後在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。

我希望這有助於！