Continual counter regardless of page refresh

Question

I have this piece of jQuery that currently increments a number by one every 5 seconds. The problem I have is that its client side, therefore it resets every time you refresh

Answer 1

Check this DEMO

//Counter
var counter=22000000000;
if(typeof(localStorage.getItem('counts'))!='object')
{
   counter=parseInt(localStorage.getItem('counts'));
}
setInterval(function () {
    $(".count").html(counter);
    ++counter;
    localStorage.setItem('counts',counter);
}, 1000);

Highlight on localStorage

localStorage is an implementation of the Storage Interface. It stores data with no expiration date, and gets cleared only through JavaScript, or clearing the Browser Cache / Locally Stored Data - unlike cookie expiry.

Answer 2

It comes down to two simple choices for you. Just choose the right one which better fits your requirement:

Choose Cookie : If you want the server side to access the counter. Remember cookies are sent along with the requests by default.

Choose Local Storage : If you don't want to send the counter along with requests every time, you are supposed to go for local storage.

Answer 3

You could do it with localStorage. Here's how I am doing it. You can tweak it as you need.

//detecting support for localStorage.
if (window.localStorage) {

    //counterValue already exists in localStorage? Let's use that or set to zero.
    var counterValue = localStorage.counterValue || 0;

    setInterval(function() {
        //increment the counter and store updated vale in localStorage as well.
        localStorage.counterValue = ++counterValue;

        //put it in your HTML if you might
        $(".count").html(counterValue);
    }, 5000);

}

Answer 4

How about using localStorage with some utility functions? Bear in mind that this is a client side solution and the item would be wiped off when the user deletes the browser cache/local data etc.

function isLocalStorage() {
    try {
        return 'localStorage' in window && window['localStorage'] !== null;
    } catch(e) {
        return false;
    }
}

function setCounter(key, val) {
    localStorage.setItem(key, val);
}

function getCounter(key) {
    return parseInt(localStorage.getItem(key), 10);
}

(function() {

    var key = "myCounter";
    var counter = isLocalStorage() && getCounter(key) || 1;
    var $placeholder = $(".count");
    $placeholder.html(counter);

    setInterval(function () {
        counter++;
        $placeholder.html(counter);
        isLocalStorage() && setCounter(key, counter);
    }, 2000);
}());

-- Demo --

Answer 5

Can you store counter in cookie.

document.cookie = counter.

so you can get last value from cookie, if user refresh the page.