CODEWITHSUNDEEP
javascripthtml
S. Gandhi
S. Gandhi

Reputation: 119

Prevent timer reset on page refresh

I am in trouble. I did countdown timer code in java script but when I refresh the page timer is reset so how to fix this problem

Here is my code.

var min = 1;
var sec = 59;
var timer;
var timeon = 0;

function ActivateTimer() {
  if (!timeon) {
    timeon = 1;
    Timer();
  }
}

function Timer() {
  var _time = min + ":" + sec;
  document.getElementById("Label1").innerHTML = _time;
  if (_time != "0:0") {
    if (sec == 0) {
      min = min - 1;
      sec = 59;
    } else {
      sec = sec - 1;
    }
    timer = setTimeout("Timer()", 1000);
  } else {
    window.location.href = "page2.html";
  }
}
<BODY onload="Timer();">
  <div id="Label1"> </div>
</BODY>

Upvotes: 2

Views: 6804

Answers (3)

chukwuemeka_ma
chukwuemeka_ma

Reputation: 19

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>

Upvotes: 1

Brandon Miller
Brandon Miller

Reputation: 1584

You're looking for window.localStorage. Something like this should work:

<script language="javascript" type="text/javascript">

        var min = 1; 
        var sec = 59;
        var timer;
        var timeon = 0;
        function ActivateTimer() {
            //Don't activate if we've elapsed.
            if(window.localStorage.getItem('elapsed') != null)
                 return;

            if (!timeon) {
                timeon = 1;
                Timer();
            }
        }
        function Timer() {
            var _time = min + ":" + sec;
            document.getElementById("Label1").innerHTML =_time;
            if (_time != "0:0") {
                if (sec == 0) {
                    min = min - 1;
                    sec = 59;
                } else {
                    sec = sec - 1;
                }
                timer = setTimeout("Timer()", 1000);
            }
            else {
                window.localStorage.setItem('elapsed', true);
                window.location.href = "page2.html";
            }
        }
    </script>

Upvotes: 0

user9062825
user9062825

Reputation:

Javascript is client-sided. It will reset on reload or any other thing.

A simple solution to your problem might be html5 storage, or session storage.

https://www.w3schools.com/html/html5_webstorage.asp

// Store
localStorage.setItem("lastname", "Smith");
// Retrieve
document.getElementById("result").innerHTML = localStorage.getItem("lastname");

Hope this helped!

Upvotes: 0

Related Questions