Prevent Javascript coundown timer reset when page is refreshed

Question

i'm a newbie here. I know there is similar question on this but still i don't get it. Sorry for that. I'm hoping for an answer on this.

I have a 30 seconds countdown timer. How to prevent it from resetting?

Here is the code:

<html>
<body>

<div id="timer"></div> 


<script>

    var count = 1801; // 30 seconds
    var counter = setInterval(timer, 1000); //1000 will  run it every 1 second

    function timer() {
        count = count - 1;
        if (count == -1) {
            clearInterval(counter);
            document.getElementById("submittime").click();
            return;
        }

        var secondcount = count;
        var seconds = count % 60;
        var minutes = Math.floor(count / 60);
        var hours = Math.floor(minutes / 60);
        minutes %= 60;
        hours %= 60;

        document.getElementById("timer").innerHTML = hours + ":" + minutes + ":" + seconds;



    }

    </script>

</body>
</html>

I want to use the code above and merge it to this. Currently this code is a timer from 0 to 10 and not being refreshed by the browser. I dont know how to do it with hour, minute, second.

<body>
    <div id="divCounter"></div>
    <script type="text/javascript">
    if(localStorage.getItem("counter")){
      if(localStorage.getItem("counter") >= 10){
        var value = 0;
      }else{
        var value = localStorage.getItem("counter");
      }
    }else{
      var value = 0;
    }
    document.getElementById('divCounter').innerHTML = value;

    var counter = function (){
      if(value >= 10){
        localStorage.setItem("counter", 0);
        value = 0;
      }else{
        value = parseInt(value)+1;
        localStorage.setItem("counter", value);
      }
      document.getElementById('divCounter').innerHTML = value;
    };

    var interval = setInterval(function (){counter();}, 1000);
  </script>
</body>

You need to use cookies/browser storage to make it survive the page refresh see this for some hints http://stackoverflow.com/questions/37606193/countdown-timer-for-hours-minutes-and-seconds/37606971#37606971 — Vinay, Jul 25 '16 at 05:15
Thank you but do you know how to apply or merge this code to this example code answer.http://stackoverflow.com/questions/22099714/how-to-make-countdown-timer-not-reset-when-refresh-the-browser — deynyeldan, Jul 25 '16 at 06:35
i want to use local storage but i dont know how to apply it with this code. this code is going to submit the quiz if (count == -1) { clearInterval(counter); document.getElementById("submittime").click(); return; } — deynyeldan, Jul 25 '16 at 06:37

score 2 · Answer 1 · answered Jul 25 '16 at 03:08

2

Usually the client side javascript is reloaded when the page is reloaded. that's how it works. According to my knowledge the best way is to,

Store the countdown value in a Cookie or Local Storage and on page load continue from that value.

answered Jul 25 '16 at 03:08

Nilan

94
3

chukwuemeka_ma · Answer 2 · 2020-07-07T16:09:10.727

This approach uses localStorage and does not Pause or Reset the timer on page refresh.

<p id="demo"></p>

<script>
    var time = 30; // This is the time allowed
    var saved_countdown = localStorage.getItem('saved_countdown');

    if(saved_countdown == null) {
        // Set the time we're counting down to using the time allowed
        var new_countdown = new Date().getTime() + (time + 2) * 1000;

        time = new_countdown;
        localStorage.setItem('saved_countdown', new_countdown);
    } else {
        time = saved_countdown;
    }

    // Update the count down every 1 second
    var x = setInterval(() => {

        // Get today's date and time
        var now = new Date().getTime();

        // Find the distance between now and the allowed time
        var distance = time - now;

        // Time counter
        var counter = Math.floor((distance % (1000 * 60)) / 1000);

        // Output the result in an element with id="demo"
        document.getElementById("demo").innerHTML = counter + " s";
            
        // If the count down is over, write some text 
        if (counter <= 0) {
            clearInterval(x);
            localStorage.removeItem('saved_countdown');
            document.getElementById("demo").innerHTML = "EXPIRED";
        }
    }, 1000);
</script>

Prevent Javascript coundown timer reset when page is refreshed

2 Answers2