javascript - Saving a variable after closing browser - Stack Overflow

admin管理员组

文章数量:1391999

Ok so I got a simple script, that increase a number when a button is pressed:

<script>
var count = 0;
    var button = document.getElementById("countButton");
    var display = document.getElementById("displayCount");

    button.onclick = function(){
        count++;
        display.innerHTML = count;
        } </script>

This is the button: <input type="button" value="Count" id="countButton" />

And this is the number: <span id="displayCount">0</span>

My problem is, that the number is starting again from 0 when I refresh the page. What I want, for example, if I press the button twice and then restart the browser, the page will display number "2", not 0.

Some help?

Ok so I got a simple script, that increase a number when a button is pressed:

<script>
var count = 0;
    var button = document.getElementById("countButton");
    var display = document.getElementById("displayCount");

    button.onclick = function(){
        count++;
        display.innerHTML = count;
        } </script>

This is the button: <input type="button" value="Count" id="countButton" />

And this is the number: <span id="displayCount">0</span>

My problem is, that the number is starting again from 0 when I refresh the page. What I want, for example, if I press the button twice and then restart the browser, the page will display number "2", not 0.

Some help?

• javascript
• html

Share Improve this question Follow asked Mar 27, 2015 at 21:16 Adyy PopAdyy Pop 11511 silver badge77 bronze badges 4

• 2 look at the localStorage: w3schools./html/html5_webstorage.asp – Igor Commented Mar 27, 2015 at 21:18
• If you want to avoid localStorage, there is also just using cookies: developer.mozilla/en-US/docs/Web/API/document/cookie – taveras Commented Mar 27, 2015 at 21:20
• 1st thought try window.onunload – www139 Commented Mar 27, 2015 at 21:32
• Your best bet if you want the data to be saved is to use a db or xml file on the server. You would need to use the onunload or I remember reading about a U.S. Event that was something like before unload. Make an Ajax request and save it. This means even if the user clears the cookies/local storage your data will still be accessible. I'm on the phone right now but I'll post an answer later – www139 Commented Mar 27, 2015 at 21:36

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 5

Local storage seems to be the thing you want.

var count = 0;
if(localStorage.btncount){count=localStorage.btncount;} //check if you have already stored it; set count to it if yes
    var button = document.getElementById("countButton");
    var display = document.getElementById("displayCount");
    display.innerHTML = count;
    button.onclick = function(){
        count++;
        localStorage.btncount=count; // store the count
        display.innerHTML = count;
    }

You need to use localStorage API.

http://www.w3schools./html/html5_webstorage.asp

Not tested.

<script>
    var count = localStorage.getItem("count") || 0;
    var button = document.getElementById("countButton");
    var display = document.getElementById("displayCount");

    button.onclick = function() {
        count++;
        display.innerHTML = count;

        localStorage.setItem("count", count);
    }
</script>

That is because the script is reloaded every time you refresh the page.

The most modern/simple solution to solve this is using webstorage (local/session storage in the browser) which was introduced with HTML5.

With this you could do:

localStorage.setItem('count', '0');
var incrementedCount = localStorage.getItem('count') + 1;
localStorage.setItem('count', incrementedCount);

localStorage (and sessionStorage) is a property on the window object and can be used to save data inbetween browser sessions, sessionStorage will only keep the data in one session and is less useful for your use case.

It's a very simple API to use and at the moment it can only store strings, so to store objects you need to use JSON.stringify and JSON.parse

An alternative to local storage is using cookies. Save the value in a cookie before the browser closes using window.onbeforeunload then access it when the page loads. http://www.w3schools./js/js_cookies.asp

本文标签： javascriptSaving a variable after closing browserStack Overflow