HTML中的本地存储JavaScript

Question

我正在制作精酿啤酒网页，希望用户在输入年龄之前输入。 最初的提示有效，但是如果我切换选项卡并返回首页，则会再次提示我。

问题：在用户退出整个页面（包括导航选项卡）之前，如何仅获得一个提示并保存它。

我的剧本：

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

Answer 1

使用window.localStorage对象存储用户的年龄。 这将使信息在页面中保持不变。

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
}

Answer 2

下面是一个示例代码段，介绍如何通过在代码之上进行构建来合并localStorage 。 您可以根据需要进行清理。 如果您希望在关闭浏览器时重置的替代方法，则只需将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();
 }

该链接显示了一些针对过时浏览器的localStorage填充。

Answer 3

为此，您需要在本地存储中创建一个变量并检查其内容，然后再次运行整个函数。 我建议您在网上查看有关如何执行此操作的教程，这是我为您找到的教程： http : //diveintohtml5.info/storage.html

这也是一个简单的示例：

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

}

我希望这会有所帮助！ 祝好运 ;）