How to persist setInterval function even when page is refreshed in Jquery?

Question

I want to execute a function at certain interval and I can use setInterval for that but the problem is, each time I refresh a page, setInterval's counter is started again!

So, how can I execute a function at certain Interval even when the page is refreshed?

 setInterval(function(){
   console.log("test"); //function is called here              
   }, 10000);

This has to be executed at every 10 secs even when the page is refreshed!

Answer 1

Here is a implementation using localStorage to save the time:

function setupInterval (callback, interval, name) {
  var key = '_timeInMs_' + (name || '');
  var now = Date.now();
  var timeInMs = localStorage.getItem(key);
  var executeCallback = function () {
    localStorage.setItem(key, Date.now());
    callback();
  }
  if (timeInMs) { // User has visited
    var time = parseInt(timeInMs);
    var delta = now - time;
    if (delta > interval) { // User has been away longer than interval
      setInterval(executeCallback, interval);
    } else { // Execute callback when we reach the next interval
      setTimeout(function () {
        setInterval(executeCallback, interval);
        executeCallback();
      }, interval - delta);
    }
  } else {
    setInterval(executeCallback, interval);
  }
  localStorage.setItem(key, now);
}

setupInterval(function () {
  console.log("test"); // function is called here
}, 10000);