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 >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> 

CodePudding user response：

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());
     }

CodePudding user response：

Using luxon js and calculating as Millis versus handling hours, minutes and seconds

//  this code set time to 24 hrs
let duration = luxon.Duration.fromObject({
  days: 1
});

var interval;

function tick() {
  let remaining = localStorage.getItem("interval") || duration.toMillis();

  remaining -= 1000;

  let d = luxon.Duration.fromMillis(remaining);
  console.log(d.toHuman());

  localStorage.setItem("interval", remaining);
}

function onl oad() {
  var interval = setInterval(tick, 1000);

  console.log("Timer Started");
}

function onUnLoad() {
  cancelInterval(interval);

  console.log("Timer Stopped");
}

onLoad();
onUnLoad();

<script src="https://moment.github.io/luxon/global/luxon.min.js"></script>