HTML本地存儲

我試圖在用數據填充表單後在本地存儲上存儲信息，我想將表單的內容保存在本地存儲中，但由於某種原因，一旦我提交了信息，它就不起作用並刷新頁面中的信息不保存任何建議HTML本地存儲

<!--local Storage--> 
<!DOCTYPE html> 
<html> 
<head> 
<script> 
function info() 
{ 
    if(typeof(Storage)!=="undefined"){ 
     var fn = document.getElementById("FirstName").value; 
     var ln = document.getElementById("LastName").value; 
     var zc = document.getElementById("zipcode").value; 

     localStorage.FastName = fn; 
     localStorage.FirstName = ln; 
     localStorage.Zipcode = zc; 

     document.getElementById("result").innerHTML=localStorage.FastName+" "+" "+localStorage.FirstName+" "+localStorage.Zipcode; 
    }else{ 
     document.getElementById("result").innerHTML="Sorry, your browser does not support web storage..."; 
    } 

} 
</script> 
</head> 
<body> 
<p>fill in your information:</p> 
First name: <input type="text" id="FirstName" value=""><br> 
Last name: <input type="text" id="LastName" value=""><br> 
Zip Code: <input type="text" id="zipcode" value="" > 
<p><button onclick="info();" type="button">Submit</button></p> 
<div id="result"></div> 
</body> 
</html>

來源

2013-12-15 Karish Karish

您可能應該使用Modernizr來檢查瀏覽器是否支持localStorage。 – hgoebl

你可能想使用localStorage.setItem("FirstName", fn);的值寫入localStorage的。

如果您希望重新加載輸入字段中的值，則需要通過讀取localStorage中的值（通過getItem）在應用程序啓動時填充輸入字段。

例如追加在末尾

<script> 
document.getElementById("FirstName").value = localStorage.getItem("FirstName"); 
... 
</script>

來源

2013-12-15 20:22:48

謝謝@Stefan Haustein我還添加了ReadInfo（）函數來讀取信息，一旦我刷新頁面。我也應該將信息存儲在數組中以備將來使用？ –

回答

相關問題