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