页面重新加载后，本地存储不保留数据
[英]localstorage not retaining data after page reload
问题描述
I am trying to retain data in a localstorage after reload but it is not working this is my attempt 
我试图在重新加载后将数据保留在本地存储中，但是它不起作用，这是我的尝试
<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>
on refreshing the page after entering data on the form it keeps alerting null. 在表单上输入数据后刷新页面时，它将保持警报为空。 kindly assist 请协助
2 个解决方案
解决方案1
1 已采纳 2017-04-08 17:21:41
In your onbeforeunload , name is the name of the window (because you haven't given it any other value, and browsers have a global name property which is the name of the window — it's usually blank). 在onbeforeunload ， name是窗口的名称（因为您没有给它其他任何值，并且浏览器有一个全局name属性，它是窗口的名称-通常为空白）。
In this line: 在这一行：
var name = localStorage.getItem(name);
...it's undefined , because of the var name . ...由于var name undefined 。
You need to use a proper name, for instance: 您需要使用适当的名称，例如：
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);
};
Also note charlietfl's oint that if you don't want to alert null on the first visit to the page, you need to put the alert in the body of the if : 还要注意charlietfl的观点，如果您不想在第一次访问该页面时向null发出警报，则需要将alert置于if的正文中：
window.onload = function() {
var name = localStorage.getItem("your-setting-name");
if (name !== null) {
$('#inputName').val(name);
alert(name);
}
};
Otherwise, it'll alert null on the first visit and then whatever the last value was otherwise. 否则，它将在第一次访问时发出null警报，然后在其他情况下发出最后一个警报。
(Also note that I've added some missing ; . Automatic Semicolon Insertion will add these particular ones, but it's an error-correction mechanism, so I'd advise not relying on it.) （还请注意，我已经添加了一些缺少的内容; 。自动分号插入将添加这些特定的内容，但这是一种错误纠正机制，因此建议您不要依赖它。）
Other issues: 其他事宜：
You're using jQuery functions, but haven't shown any script tag including jQuery on the page.
您正在使用jQuery函数，但尚未在页面上显示任何脚本标签，包括jQuery。 You have the closing
</html>tag before the<input ...>tag.在<input ...>标记之前有</html>结束标记。
Here's a fiddle with the above fixed (can't use Stack Snippets with local storage): https://jsfiddle.net/un86not0/ Full working page: 这是上面已修复的小提琴（不能将Stack Snippets用于本地存储）： https : //jsfiddle.net/un86not0/完整的工作页面：
<!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>
解决方案2
-1 2017-04-08 17:25:28
The variable name haven't been initiated yet you already used it as a value reference. 尚未启动变量name但您已经将其用作值引用。 Maybe it wasn't working well because of that? 也许是因为这样效果不好？
Here in this solution, you can separately reference the local storage item without using the variable name which might have caused it not to work. 在此解决方案中，您可以在不使用可能导致其无法使用的变量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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.