How to save a Javascript Variable?

Question

I am working on a project that involves a global 'bank' of points.

I've been trying to use snippits of this code for it, but I can't get the variable to save after refresh.

    <!DOCTYPE HTML>
<html>
<head>
    <title>Javascript variable testing</title>
</head>

<body>
    <script type="text/javascript">
    var clicks = 500000;

    function onClick() {
        clicks += 1;
        document.getElementById("clicks").innerHTML = clicks;

    };

    </script>
    <button type="button" onClick="onClick()">Click this bit</button>
    <p>Clicks: <a id="clicks">500000</a></p>

</body>
</html>

localStorage['myKey'] = 'myValue' will persist after reload. — Stepan Yakovenko, May 01 '16 at 12:24
As @StepanYakovenko commented, use [localStorage](https://developer.mozilla.org/en/docs/Web/API/Window/localStorage) — Alon Eitan, May 01 '16 at 12:25

0xdw · Answer 1 · 2016-05-01T13:26:28.083

1

Set you data to localStorage. Here is documentation https://developer.mozilla.org/en/docs/Web/API/Window/localStorage

That can get values after page refresh.

Set you value using: localStorage.setItem('key', 'value');

Get you value from local storage after page refreshed : localStorage.getItem('key');

Otherwise you can use sessionStorage, Web SQL & cookies.

Example :

var clicks = 500000;

localStorage.setItem('clicks', clicks); // set you value to localStorage

function onClick() {
  clicks += 1;
  localStorage.setItem('clicks', clicks); // update you value
  document.getElementById("clicks").innerHTML = clicks;

}

window.onload = function() {
  clicks = localStorage.getItem('clicks'); // get your value from localStorage
};

<!DOCTYPE HTML>
<html>

<head>
  <title>Javascript variable testing</title>
</head>

<body>
  <button type="button" onclick="onClick()">Click this bit</button>
  <p>Clicks: <a id="clicks">500000</a>
  </p>

</body>

</html>

edited May 01 '16 at 13:26

answered May 01 '16 at 12:25

0xdw

3,755
2
25
40

Can you please tell me where in the code I should insert this? – Billybobof May 01 '16 at 13:08
@Billybobof Insert it into your external javascript file or inline `script` tag. Please read API Documentation that i provided. After you can get an idea. – 0xdw May 01 '16 at 13:11
That didn't really help. Please just copy-paste the code in my question, and add where it's supposed to go, then post it. – Billybobof May 01 '16 at 13:16
It doesn't seem to update the value when I click the button... :( – Billybobof May 01 '16 at 13:52
Which browser you're using? – 0xdw May 01 '16 at 14:02
Google Chrome. It's my default. – Billybobof May 01 '16 at 14:16
So inspect on your browser and goto Resources tab/Local Storage, see it's working – 0xdw May 01 '16 at 14:24
Yes, but it doesn't display it, which is what I want it to do. – Billybobof May 01 '16 at 14:32
Assuming your browser doesn't support localStorage or any other fault. Read the doc https://developer.mozilla.org/en-US/docs/Web/API/Storage/LocalStorage – 0xdw May 01 '16 at 14:36
But that code working for me! – 0xdw May 01 '16 at 14:38

How to save a Javascript Variable?

1 Answers1