本地存儲需要一點幫助

Question

我一直在試圖理解localstorage並遇到一個小問題。 當我添加下面的代碼時，數字將爲零，我刷新該網站，直到我按下按鈕。但是我希望它在我刷新網站時顯示最新的數字。

function CollectCoin() { 
    if(typeof(Storage) !== "undefined") { 
     if (localStorage.clickcount) { 
      localStorage.clickcount = Number(localStorage.clickcount)+1; 
     } else { 
      localStorage.clickcount = 1; 
     } 
     document.getElementById("result").innerHTML = "Total coins: " + localStorage.clickcount; 
    } else { 
     document.getElementById("result").innerHTML = "Sorry, your browser does not support web storage..."; 
    } 
} 

我希望有人可以幫我解決這個問題，並向我解釋如何解決這個問題。

Answer 1

你希望它顯示的數量。這比簡單的功能

https://jsfiddle.net/ed5unzf6/1/

HTML更復雜：

<div id="result">Total coins: 0</div> 
<button id="coinButton">Collect Coins</button> 

的Javascript：

//Check if Local Storage is available 
if (typeof(Storage) == 'undefined'){ 
    document.getElementById("result").innerHTML = "Sorry, your browser does not support web storage..."; 
}else{ 

    display(); //display the coin count 
    //when user click the button, it adds 1 
    document.getElementById('coinButton').addEventListener('click', addcoin); 
} 

function addcoin() { 
    localStorage.clickcount = Number(localStorage.clickcount)+1; 
    display(); 
} 

//display function 
function display() { 

    //Check if clickcount is available. Only Number is tested, so use isNaN 
    if (!localStorage.clickcount || isNaN(localStorage.clickcount)){ 
    localStorage.clickcount = 0; 
    } 
    document.getElementById("result").innerHTML = "Total coins: " + Number(localStorage.clickcount); 
} 

Answer 2

請參閱在這裏工作：https://jsfiddle.net/nueffmvm/

function CollectCoin() { 
    if(localStorage) { 
     if(localStorage.clickCount == "NaN"){ 
      localStorage.clickCount = 1; 
     } 
     else{ 
      localStorage.clickCount++; 
     } 
     document.getElementById("result").innerHTML = "Total coins: " + localStorage.clickCount; 
    } 
    else { 
     document.getElementById("result").innerHTML = "Sorry, your browser does not support web storage..."; 
    } 
}