HTML本地存储答案

【问题标题】：HTML local storageHTML本地存储
【发布时间】：2013-12-16 04:29:02
【问题描述】：

我正在尝试将信息存储在本地存储中用数据填写表单后，我想将表单及其内容保存在本地存储中，但是由于某种原因，一旦我提交信息并刷新页面，它就不起作用了，信息没有保存任何建议

<!--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>

【问题讨论】：

你可能应该使用 Modernizr 来检查浏览器是否支持 localStorage。

标签： javascript html local-storage

【解决方案1】：

您可能希望使用 localStorage.setItem("FirstName", fn); 将值写入 localStorage。

如果您希望重新加载时输入字段中的值返回，您需要在应用程序启动时通过从 localStorage（通过 getItem）读取值来填充输入字段。

例如在末尾追加

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

【讨论】：

谢谢@Stefan Haustein 我还添加了 ReadInfo() 函数，以便在刷新页面后读取信息。我还应该将信息存储在数组中以供将来使用吗？