Question

我试图在重新加载后将数据保留在localstorage中，但它无法正常工作这是我的尝试

<script>
window.onbeforeunload = function() {
    localStorage.setItem(name, $('#inputName').val());

}


window.onload = function() {

    var name = localStorage.getItem(name);
    if (name !== null) $('#inputName').val(name);
    alert(name);


}

</script>
<html>

<body>

 <input type="text" id="inputName" placeholder="Name" required>


</body>

</html>

在表单上输入数据后刷新页面时，它会保持警报null。请帮助

Answer 1

在name中，name是窗口的名称（因为您没有给它任何其他值，浏览器有一个全局var name = localStorage.getItem(name);属性，这个名称是窗口 - 它通常是空白的。）

在这一行：

undefined

...它是var name，因为window.onbeforeunload = function() { localStorage.setItem("your-setting-name", $('#inputName').val()); }; window.onload = function() { var name = localStorage.getItem("your-setting-name"); if (name !== null) $('#inputName').val(name); alert(name); };。

您需要使用正确的名称，例如：

null

另请注意charlietfl的提示，如果您不想在第一次访问该页面时提醒alert，则需要将if放在window.onload = function() { var name = localStorage.getItem("your-setting-name"); if (name !== null) { $('#inputName').val(name); alert(name); } };的正文中：

null

否则，它会在第一次访问时提醒;，然后提醒最后一个值。

（另请注意，我添加了一些</html>。自动分号插入会添加这些特殊的，但它是一种纠错机制，所以我建议不要依赖它。）

其他问题：

您正在使用jQuery函数，但未在页面上显示任何包含jQuery的脚本标记。
您在<input ...>代码之前有结束<!doctype html> <html> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=Edge"> <title>Example</title> </head> <body> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script> window.onbeforeunload = function() { localStorage.setItem("your-setting-name", $('#inputName').val()); }; window.onload = function() { var name = localStorage.getItem("your-setting-name"); if (name !== null) { $('#inputName').val(name); alert(name); } }; </script> <input type="text" id="inputName" placeholder="Name" required> </body> </html>代码。

以上是固定的小提琴（不能使用带有本地存储的Stack Snippets）：https://jsfiddle.net/un86not0/完整的工作页面：

{{1}}

Answer 2

变量name尚未启动，但您已将其用作值参考。也许它因此而无法正常运作？

在此解决方案中，您可以单独引用本地存储项而不使用可能导致其无法工作的变量name。

<script>
window.onbeforeunload = function() {
    localStorage.setItem('myItem', $('#inputName').val());

}


window.onload = function() {

    var name = localStorage.getItem('myItem');
    if (name !== null) $('#inputName').val(name);
    alert(name);
}

</script>

localstorage在页面重新加载后不保留数据

2 个答案: