Countdown timer - make it persistent even after refresh or reload

user_14141123 0
Viewed 3916

I have a html page where there is counter starts on page loading. But the problem is if someone refresh or reloads the page the counter restarts. I dont know how to use local storage or cookies to make sure my counter does not reset upon reload. I am aware of the similar questions available here but my issue is i want local storage to be part of a function (countDown()).

Here is the code I tried:

<script>

    var timer;

    function countDown(i, callback) {
        //callback = callback || function(){};
        timer = setInterval(function() {
            minutes = parseInt(i / 60, 10);
            seconds = parseInt(i % 60, 10);

            minutes = minutes < 10 ? "0" + minutes : minutes;
            seconds = seconds < 10 ? "0" + seconds : seconds;

            document.getElementById("displayDiv ").innerHTML = "Time (h:min:sec) left for this station is  " + "0:" + minutes + ":" + seconds;

            i-- || (clearInterval(timer), callback());
        }, 1000);
    }

    window.onload = function() {
        countDown(60, function() {
            $('#myModal').modal('show');
        });
    };
</script>
javascript
4 Answers

First, persist your current counter value to the session storage (with a specific key) at each iteration. You may only persist/update the value when the counter is greater than 0, and then clear the storage key once counter reached 0.

const COUNTER_KEY = 'my-counter';

function countDown(i, callback) {
  //callback = callback || function(){};
  timer = setInterval(function() {
    minutes = parseInt(i / 60, 10);
    seconds = parseInt(i % 60, 10);

    minutes = minutes < 10 ? "0" + minutes : minutes;
    seconds = seconds < 10 ? "0" + seconds : seconds;

    document.getElementById("displayDiv").innerHTML = "Time (h:min:sec) left for this station is  " + "0:" + minutes + ":" + seconds;

    if ((i--) > 0) {
      window.sessionStorage.setItem(COUNTER_KEY, i);
    } else {
      window.sessionStorage.removeItem(COUNTER_KEY);
      clearInterval(timer);
      callback();
    }
  }, 1000);
}

Then on the window.onload function, first check if there is a value under the above key on the session storage. If a value is there, start the countdown from that value. Otherwise, start from your default value (60).

window.onload = function() {
  var countDownTime = window.sessionStorage.getItem(COUNTER_KEY) || 60;
  countDown(countDownTime, function() {
    $('#myModal').modal('show');
  });
};
user_21406330

You can try using localStorage as follows:

var timer;

function countDown(i, callback) {
    //callback = callback || function(){};

    timer = setInterval(function () {
        minutes = parseInt(i / 60, 10);
        seconds = parseInt(i % 60, 10);

        minutes = minutes < 10 ? "0" + minutes : minutes;
        seconds = seconds < 10 ? "0" + seconds : seconds;

        document.getElementById("displayDiv").innerHTML = "Time (h:min:sec) left for this station is  " + "0:" + minutes + ":" + seconds;

        // update the persisted time interval
        localStorage.setItem('timeLeft', i);

        i-- || (clearInterval(timer), callback());

    }, 1000);
}

window.onload = function () {
    let timeInterval = 100;
    //check if you have the last counter value
    let timeLeft = localStorage.getItem('timeLeft');
    if (isNaN(timeLeft)) {
        //save the current interval
        localStorage.setItem('timeLeft', timeInterval);
    } else if (timeLeft == 0) {
        //save the current interval
        localStorage.setItem('timeLeft', timeInterval);
    } else {
        // take the last saved value
        timeInterval = timeLeft;
    }

    countDown(timeInterval, function () {
        $('#myModal').modal('show');
    });
};
user_83363170
user_111576870

I have a made a promise based function for this.

It uses localStorage to store the countdown every 1 second and, once the time is over, it returns you a promise.

I use it with React and React Router on production, it's been working great.

    function countdown(interval = 5000) {
      return new Promise(async (resolve, reject) => {
        let intervalLoop = null

        function countTimer() {
          if (!localStorage.endTime) {
            localStorage.endTime = +new Date() + interval
          }

          let remaining = localStorage.endTime - new Date()
          if (remaining >= 0) {
            let currentTime = Math.floor(remaining / 1000)
            console.log("Countdown current time:", currentTime)
          } else {
            clearInterval(intervalLoop)
            resolve(true)
          }
        }

        intervalLoop = setInterval(countTimer, 1000)
      })
    }

Make sure you are inside an async function to use it:

(async _ => {
      console.log("Countdown starts now...")
      await countdown(5000)
      console.log("Countdown is over!");
    })()
user_47810670
Related