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 the page.

Instead I'd like the counter to continue even if you are away from the site and regardless of how many times you refresh the page, which is why I thought a server side script such as PHP would be better suited to my use case. If not please suggest otherwise.

I've setup a working fiddle of what I currently have with jQuery: /

What would be the PHP to recreate this affect that include my requirements above?

Here's the Jquery I'm using:

//Counter
var counter = 22000000000;
$(".count").html(counter);
  setInterval(function () {
  $(".count").html(counter);
  ++counter;
}, 5000);

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 the page.

Instead I'd like the counter to continue even if you are away from the site and regardless of how many times you refresh the page, which is why I thought a server side script such as PHP would be better suited to my use case. If not please suggest otherwise.

I've setup a working fiddle of what I currently have with jQuery: http://jsfiddle/f354bzy5/

What would be the PHP to recreate this affect that include my requirements above?

Here's the Jquery I'm using:

//Counter
var counter = 22000000000;
$(".count").html(counter);
  setInterval(function () {
  $(".count").html(counter);
  ++counter;
}, 5000);

• javascript
• php
• jquery
• html
• count

• 4 I would suggest that you keep the count logic in the client side, but retrieve the starting counter from your server-side via AJAX. – Rory McCrossan Commented Jun 1, 2015 at 11:51
• 3 Or use a cookie/localStorage to get/store the previous counter. – lshettyl Commented Jun 1, 2015 at 11:54
• Store your counter in the localStorage. localStorage.counter = counter, and on page load/refresh : if( typeof localStorage.counter !== 'undefined' ) counter = parseInt(localStorage.counter); – Jeremy Thille Commented Jun 1, 2015 at 11:54

5 Answers 5

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.

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 --

Can you store counter in cookie.

document.cookie = counter.

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

It es 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.

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);

}