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（）函数来读取信息，一旦我刷新页面。我也应该将信息存储在数组中以备将来使用？ –

回答

相关问题