[英]Local storage JavaScript in HTML
I'm making a craft beer webpage, and I want users to type in their age before entering. 我正在制作精酿啤酒网页,希望用户在输入年龄之前输入。 The initial prompt works, but if I switch tabs and go back to home page I am prompted again. 最初的提示有效,但是如果我切换选项卡并返回首页,则会再次提示我。
Question: How do I only get one prompt and save it until user exits the whole webpage including navigating tabs.` 问题:在用户退出整个页面(包括导航选项卡)之前,如何仅获得一个提示并保存它。
My script: 我的剧本:
<script> function CloseWindow(){ window.open('','_self',''); window.close(); } </script> <script> var age; age = prompt("Please enter in your age: "); if (age >= 21){ alert("Age is valid"); } else{ alert("Not valid age"); CloseWindow(); } </script>
Use the window.localStorage
object to store the user's age. 使用window.localStorage
对象存储用户的年龄。 This will allow the information to persist through pages. 这将使信息在页面中保持不变。
if (window.localStorage && !window.localStorage.age) {
//Your code here to prompt the user's age and save it in window.localStorage.age
} else {
//Your code here to prompt the user's age and save it in document.cookie
}
Below is an example snippet on how you can incorporate localStorage
by building on top of your code. 下面是一个示例代码段,介绍如何通过在代码之上进行构建来合并localStorage
。 You can clean it up for what you need. 您可以根据需要进行清理。 If you want an alternative that resets when you close your browser, you can just replace localStorage
with sessionStorage
. 如果您希望在关闭浏览器时重置的替代方法,则只需将localStorage
替换为sessionStorage
。
function CloseWindow() {
window.open('', '_self', '');
window.close();
}
var validAge = localStorage.getItem('validAge');
if (!validAge) {
var age;
age = prompt('Please enter in your age: ');
if (age >= 21) {
alert('Age is valid');
localStorage.setItem('validAge', 'true');
} else {
alert('Not valid age');
localStorage.setItem('validAge', 'false');
CloseWindow();
}
} else if (validAge === 'true') {
alert('Age is valid');
} else if (validAge === 'false') {
alert('Not valid age');
CloseWindow();
}
This is a link that shows some localStorage polyfills for outdated browsers. 该链接显示了一些针对过时浏览器的localStorage填充。
In order to do that, you need to create a variable in the local storage and check its content before running the whole function again. 为此,您需要在本地存储中创建一个变量并检查其内容,然后再次运行整个函数。 I suggest you check online for tutorials how to do that, here's one I found for you : http://diveintohtml5.info/storage.html 我建议您在网上查看有关如何执行此操作的教程,这是我为您找到的教程: http : //diveintohtml5.info/storage.html
Here's an example of how to do it simply too : 这也是一个简单的示例:
//Get the variable from the local storage
var age = localStorage.getItem('age') || 0; //instead you get nothing
if (age >= 18) {
//access the website
} else {
//here's where you run your function
//...
//Set the local storage variable
localstorage.setItem('age', age) //where *age* is the name of the function's variable
}
I hope this will helps ! 我希望这会有所帮助! Good luck ;) 祝好运 ;)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.