Counter Variable saved after web page refresh

Question

I'm trying to get the counter variable saved when the page refreshes. For example, if the counter is at 5,000 then after refresh the counter will start back up at 5,000 and keeps saving so it doesn't start at the default value.

var count = 309000000;
function tick(){
    count += Math.round(Math.random()*3);
    $('#test').text(count.toLocaleString());
    count;
    setTimeout(tick,Math.round(1000+Math.random()*3000));
}
tick();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<p id="test"></p>

This code I have sets the default variable to 309,000,000 but everytime I refresh the page the value doesn't save and go back to the default. Please assist on where to start with this. I've looked at local storage and cookies but don't quite understand it.

Possible duplicate of [Persist javascript variables across pages?](https://stackoverflow.com/questions/1981673/persist-javascript-variables-across-pages) or better: [Persist variables between page loads](https://stackoverflow.com/q/29986657/4642212). Use Local Storage. — Sebastian Simon, Aug 06 '18 at 15:32

score 1 · Accepted Answer · answered Aug 06 '18 at 15:41

You can save the variable in sessionStorage using sessionStorage.setItem('key','value')

Another option is to use localStorage

Docs at: https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage

Counter Variable saved after web page refresh

1 Answers1