本地存儲JavaScript中的HTML

Question

我正在製作精釀啤酒網頁，並且我希望用戶在進入之前鍵入其年齡。最初的提示有效，但如果我切換標籤並返回主頁，我會再次提示。

問：如何我只得到一個提示，並保存它，直到用戶退出整個網頁包括瀏覽tabs.`

我的腳本：

<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

爲了做到這一點，你需要創建在本地存儲變量中，並再次運行全功能之前檢查其內容。我建議你在網上檢查教程如何做到這一點，這裏有一個我發現你：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 

} 

我希望這將有助於！祝你好運;）

Answer 3

下面是一個關於如何通過在代碼上構建localStorage的示例代碼片段。你可以清理它，以滿足你的需求。如果您想要關閉瀏覽器時重置的替代方法，則可以用sessionStorage替換localStorage。

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(); 
} 

這是一個link，顯示了過時的瀏覽器的一些localStorage的polyfills。