Hello I'm creating a clicker game with HTML and Jquery
So im currently facing an issue with localstorage.getItem . I want to get the saved amount of cash after reloading the page.
Lets say i got 5 munny, i reload the page it will show the 5 munny i had.

But when i click Munny to get more it restarts from 1 and adds like "1" "1" but not 1 1

(booster variable is used for future upgrades, if anything)

       <div >
          <h1 >Munny</h1>
          <h1 >You got <span >0</span> munny</h1>
       </div>

    var cash;
    var booster = 1;
    
    cash = 0;
    $('h1.floppa').on('click', function(){
        $('span.cash').text(cash  = booster)
        
        localStorage.setItem('cash', cash)


    })
    //---get saved item from localstorage---//
    
    cash = localStorage.getItem('cash')
    $('span.cash').text(cash)

CodePudding user response：

the reason for this problem is that when you relod the page the cash variable will be zero so when you clicked it. local storage will update it value with 1.

you need to make some changes to your code let's say like this:

let cash = localStorage.getItem("cash") || 0;

If the cash property exists in localStoreg then set the value of the cash to that value else set it 0

I hope that solves your problem.

CodePudding user response：

The localStorage saves the values in the string data type. You have to convert it to number type using Number() or parseInt() to perform calculations.

CodePudding user response：

It is very important for you to understand how to debug your code. First of all, when you refresh the page, two things happens.

1. The variable 'cash' is created and this variable is set within the window object of JavaScript's global execution context.
2. Then the variable 'cash' is being set to 0. Remember that JavaScript does not "remember" any variable values after the page has been reloaded. Therefore, when the page is refreshed and the button is clicked, the variable 'cash' is set to be 0. To fix this problem, it is very important to check the value of localStorage.getItem() whenever the page is reloaded. Here is a better version of what you are trying to achieve:

<button id="add"> Money </button>
<p id="text"> </p>
<script>
let text = document.getElementById('text');
let button = document.getElementById('add');
let cash = localStorage.getItem('cash')?localStorage.getItem('cash'):0;
text.innerHTML = "You have $"   cash;
button.addEventListener('click', function(){
  localStorage.setItem('cash',  cash);
  text.innerHTML = 'You have $'   localStorage.getItem('cash');
});
</script>

This time, when the page is reloaded, we are checking if localStorage.getItem() has any value. If it has a value, the value would be assigned to 'cash'. If not, we set the value of 'cash' to 0.