Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Contact

How to Save and retrieve 24hrs Countdown timer to Local.Storage

I am a JS newbie. I have a 24hrs Countdown timer which resets on page reload, however i want to save the start progress using LocalStorage so that it ends exactly after 24hrs. Which means that it does not stop or restart as soon as it has started even when the page is closed. It would always continue the countdown when the page is visited. My code is below


<div class="ml-2">Time Remaining&emsp;<span id="remainingTime"></span></div>

<script>
//  this code set time to 24 hrs
 var timer2 = "36:00:00";
 
 var session_timer = localStorage.getItem('timer2');
 if(session_timer){
     console.log('timer2',session_timer);
     timer2 = session_timer;
 }

 var interval = setInterval(function() {


     var timer = timer2.split(':');
     //by parsing integer, I avoid all extra string processing
     var hours = parseInt(timer[0], 10);
     var minutes = parseInt(timer[1], 10);
     var seconds = parseInt(timer[2], 10);
     --seconds;
     minutes = (seconds < 0) ? --minutes : minutes;
     hours = (minutes < 0) ? --hours : hours;
     if (hours < 0) clearInterval(interval);
     minutes = (minutes < 0) ? 59 : minutes;
     minutes = (minutes < 10) ? '0' + minutes : minutes;
     hours = (hours < 10) ?  '0' + hours : hours;
     if (minutes < 0) clearInterval(interval);
     seconds = (seconds < 0) ? 59 : seconds;
     seconds = (seconds < 10) ? '0' + seconds : seconds;
     minutes = (minutes < 10) ?  minutes : minutes;
     
     timer2 = hours+ ':' +minutes + ':' + seconds;    
     if(hours <= 0 && minutes == 0 && seconds == 0){
         // if you want to delete it on local storage
         // localStorage.removeItem('timer');
         console.log('Transaction Cancelled')
     }
     else{
         $('#remainingTime').html(timer2);
         // if you want to save it on local storage
         // localStorage.setItem('timer', timer2);
     }

 }, 1000);

     
 </script> 

>Solution :

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

To save something in Local Storage you can use localStorage.setItem(key, value)

To get something from Local Storage you can use localStorage.getItem(key, value)

     if(hours <= 0 && minutes == 0 && seconds == 0){
         // if you want to delete it on local storage
         localStorage.removeItem('timer');
         console.log('Transaction Cancelled')
     }
     else{
         $('#remainingTime').html(timer2);
         // if you want to save it on local storage
         localStorage.setItem('timer', timer2.toString());
     }
Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading