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

}

我希望這會有所幫助！ 祝好運 ;）