Tips for maintaining my Countdown timer even after a page refresh

Question

Tips for maintaining my Countdown timer even after a page refresh

I'm currently tackling JS and I've hit a roadblock. I have successfully created a countdown timer, but now I want it to continue running even after the page is reloaded. I decided to use sessionStorage to store the countdown value and check if there's an existing sessionStorage on page load. The issue I'm facing is figuring out how to keep the countdown going with the stored values in sessionStorage.

Any assistance would be greatly appreciated!

class Timer {

    constructor(secondes, minutes) {
        this.secondes = secondes;
        this.minutes = minutes;
        this.button = document.getElementById("button");
        this.counter = document.getElementById("counter");
        this.storageCheck();
    }

    countdown(minutes) {
        var seconds = this.secondes;
        var mins = this.minutes; 
        var myCounter = this.counter; 
        function tick() {
            var current_minutes = mins-1;
            seconds--;
            myCounter.innerHTML = current_minutes + ":" + (seconds < 10 ? "0" : "") + seconds;
            var duration = sessionStorage.setItem("timer", myCounter.innerHTML);

        if( seconds > 0 ) {
                setTimeout(tick, 1000);
            } else {
                if(mins > 1){
                    countdown(mins-1);           
                }
            }
        }
      tick();
    }

    buttonClick() {
        button.addEventListener("click", () => {
            this.countdown(this.minutes);
        })
    }

    storageCheck() {
        if (sessionStorage.getItem("timer")) {
            // Determine how to maintain the countdown
        }
    }
}

let newTimer = new Timer(60, 20);
newTimer.buttonClick();

<!DOCTYPE html>
<html>
<head>
<title>Test Countdown</title>
</head>
<body>

<div id="counter"></div>
<button id="button">Run</button>

<script type="text/javascript" src="countdown.js"></script>

</body>
</html>

javascript countdown page-refresh session-storage

Answer 1

Answer №1

Ensure that before initializing the seconds and minutes in the constructor, you check if they are already stored in the storage. If they do not exist in the storage, then only assign the values passed in the constructor to this.seconds = seconds and this.minutes = minutes;

   constructor(seconds, minutes) {
        this.button = document.getElementById("button");
        this.counter = document.getElementById("counter");
        if(!this.storageCheck()){ // check if seconds and minutes are stored in the storage
            this.seconds = seconds; // if not, set the minutes and seconds to the values passed in the constructor
            this.minutes = minutes;
        }
        else {
          this.countdown(this.minutes);
        }
    }

The function storageCheck() should verify if the values exist in storage. If they do, retrieve the values and assign them to this.seconds and this.minutes, then return true, otherwise return false.

  storageCheck() {
        // check if both minutes and seconds exist
        if (sessionStorage.getItem("mins") && sessionStorage.getItem("secs")) {
            // keep the countdown running
            this.minutes = parseInt(sessionStorage.getItem("mins")); // get minutes
            this.seconds = parseInt(sessionStorage.getItem("secs")); // get seconds
            return true;
        }
        else {
          return false;
        }
    }

In the countdown() function, save the current values to storage:

sessionStorage.setItem("mins", vm.minutes); // set current minutes
sessionStorage.setItem("secs", vm.seconds); // set current seconds

Test this implementation here: https://jsbin.com/bavexigute/1/edit?html,js,console,output

class Timer {

    constructor(seconds, minutes) {
      this.button = document.getElementById("button");
      this.counter = document.getElementById("counter");
      if (!this.storageCheck()) { // check if seconds and minutes are stored in the storage
        this.seconds = seconds; // if not, set the minutes and seconds to the values passed in the constructor
        this.minutes = minutes;
       }
       else {
          this.countdown();
       }
    }

     countdown() {
       debugger;
       var vm=this;
        if(!(this.minutes-1<0))
           this.minutes--;
       
       let tick = function() {
           vm.seconds--
           if(vm.seconds == 0){
              vm.seconds = 59;
              vm.minutes--;
           }
           vm.counter.innerHTML =  vm.minutes + ":" + (vm.seconds < 10 ? "0" : "") + vm.seconds;
           if(vm.minutes == 0 && vm.seconds - 1 == 0){
            vm.seconds--; 
            vm.counter.innerHTML =  vm.minutes + ":" + vm.seconds-1;
            }    
           else{
             setTimeout(tick, 1000);
           }
           sessionStorage.setItem("mins", vm.minutes); // set current minutes
           sessionStorage.setItem("secs", vm.seconds); // set current seconds
         }
        setTimeout(tick, 1000);
     }    

    buttonClick() {
        button.addEventListener("click", () => {
            this.countdown();
        })
    }

    storageCheck() {
        // check if both minutes and seconds exist
        if (sessionStorage.getItem("mins") && sessionStorage.getItem("secs")) {
            // keep the countdown running
            this.minutes = parseInt(sessionStorage.getItem("mins")); // get minutes
            this.seconds = parseInt(sessionStorage.getItem("secs")); // get seconds
            return true;
        }
        else {
          return false;
        }
    }

}

let newTimer = new Timer(60, 20);
newTimer.buttonClick();

Answer 2

Ensure that before initializing the seconds and minutes in the constructor, you check if they are already stored in the storage. If they do not exist in the storage, then only assign the values passed in the constructor to this.seconds = seconds and this.minutes = minutes;

   constructor(seconds, minutes) {
        this.button = document.getElementById("button");
        this.counter = document.getElementById("counter");
        if(!this.storageCheck()){ // check if seconds and minutes are stored in the storage
            this.seconds = seconds; // if not, set the minutes and seconds to the values passed in the constructor
            this.minutes = minutes;
        }
        else {
          this.countdown(this.minutes);
        }
    }

The function storageCheck() should verify if the values exist in storage. If they do, retrieve the values and assign them to this.seconds and this.minutes, then return true, otherwise return false.

  storageCheck() {
        // check if both minutes and seconds exist
        if (sessionStorage.getItem("mins") && sessionStorage.getItem("secs")) {
            // keep the countdown running
            this.minutes = parseInt(sessionStorage.getItem("mins")); // get minutes
            this.seconds = parseInt(sessionStorage.getItem("secs")); // get seconds
            return true;
        }
        else {
          return false;
        }
    }

In the countdown() function, save the current values to storage:

sessionStorage.setItem("mins", vm.minutes); // set current minutes
sessionStorage.setItem("secs", vm.seconds); // set current seconds

Test this implementation here: https://jsbin.com/bavexigute/1/edit?html,js,console,output

class Timer {

    constructor(seconds, minutes) {
      this.button = document.getElementById("button");
      this.counter = document.getElementById("counter");
      if (!this.storageCheck()) { // check if seconds and minutes are stored in the storage
        this.seconds = seconds; // if not, set the minutes and seconds to the values passed in the constructor
        this.minutes = minutes;
       }
       else {
          this.countdown();
       }
    }

     countdown() {
       debugger;
       var vm=this;
        if(!(this.minutes-1<0))
           this.minutes--;
       
       let tick = function() {
           vm.seconds--
           if(vm.seconds == 0){
              vm.seconds = 59;
              vm.minutes--;
           }
           vm.counter.innerHTML =  vm.minutes + ":" + (vm.seconds < 10 ? "0" : "") + vm.seconds;
           if(vm.minutes == 0 && vm.seconds - 1 == 0){
            vm.seconds--; 
            vm.counter.innerHTML =  vm.minutes + ":" + vm.seconds-1;
            }    
           else{
             setTimeout(tick, 1000);
           }
           sessionStorage.setItem("mins", vm.minutes); // set current minutes
           sessionStorage.setItem("secs", vm.seconds); // set current seconds
         }
        setTimeout(tick, 1000);
     }    

    buttonClick() {
        button.addEventListener("click", () => {
            this.countdown();
        })
    }

    storageCheck() {
        // check if both minutes and seconds exist
        if (sessionStorage.getItem("mins") && sessionStorage.getItem("secs")) {
            // keep the countdown running
            this.minutes = parseInt(sessionStorage.getItem("mins")); // get minutes
            this.seconds = parseInt(sessionStorage.getItem("secs")); // get seconds
            return true;
        }
        else {
          return false;
        }
    }

}

let newTimer = new Timer(60, 20);
newTimer.buttonClick();

Answer 3

Answer №2

To modify the minutes and seconds arguments, you can utilize your storage check function to override them if it is available.

constructor(mins, secs) {
  this.mins = mins
  this.secs = secs
  this.checkStorage = this.checkStorage.bind(this)
  this.checkStorage(mins, secs)
}
checkStorage(mins, secs) {
  if(window.storage) { // or any other condition
    this.secs = window.storage.secs
    this.mins = window.storage.mins
  }
}

You can implement a similar approach where the setStorage function updates the values initialized in the constructor.

Answer 4

To modify the minutes and seconds arguments, you can utilize your storage check function to override them if it is available.

constructor(mins, secs) {
  this.mins = mins
  this.secs = secs
  this.checkStorage = this.checkStorage.bind(this)
  this.checkStorage(mins, secs)
}
checkStorage(mins, secs) {
  if(window.storage) { // or any other condition
    this.secs = window.storage.secs
    this.mins = window.storage.mins
  }
}

You can implement a similar approach where the setStorage function updates the values initialized in the constructor.

Answer 5

Answer №3

Here's a handy trick you can try out:

window.onload = function() {
  let mins = localStorage.getItem("mins")
  let secs = localStorage.getItem("secs")
  let timer = new Timer(secs, mins);
};

Instead of storing the entire innerHtml in sessionStorage, consider saving just the minutes and seconds to see if that resolves your issue.

Answer 6

Here's a handy trick you can try out:

window.onload = function() {
  let mins = localStorage.getItem("mins")
  let secs = localStorage.getItem("secs")
  let timer = new Timer(secs, mins);
};

Instead of storing the entire innerHtml in sessionStorage, consider saving just the minutes and seconds to see if that resolves your issue.

Tips for maintaining my Countdown timer even after a page refresh

Answer №1

Answer №2

Answer №3

Similar questions

Group Hover by StyleX

Guide on navigating to a different page following a successful Google Sign In within React18

Execute a specialized function with imported modules and specified parameters

Activate automatic selection when the input field is disabled

How does the keyof operator fetch non-enumerable inherited properties from an object literal type?

Looking for a way to locate the point where objects intersect in three.js?

JavaScript Stopwatch Break

The output of JSON.stringify() when given a single value as input

Click event dynamically bound to list items

Access various results from a jQuery function

Adding a character at the current cursor position in VUE JS

Algorithm for encryption and decryption using symmetric keys

Encountering a Javascript error while trying to optimize bundling operations

Is it feasible to choose the component generated by this element?

Implementing JavaScript logic to proceed to the following array within a 3D array once a specific condition is met

What is the best way to retrieve the innerHTML content of an anchor tag with Cheerio?

Updating the query parameters/URL in Node.js's request module

AngularJS not displaying loader during AJAX request

How can I clear my object so that new Dates() can be added to my calendar?

Unraveling the Mystery of Passing Props in React.js