Question 37127 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

Save variable into localStorage and get it in future but there's an issue – Jquery

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 class="floppa">
          <h1 class="floppa">Munny</h1>
          <h1 class="text">You got <span class="cash">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)
Tags:

3

Answers


  1. 0

    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.

    Login or Signup to reply.
  2. 0

    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.

    Login or Signup to reply.
  3. 0

    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.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search