Soy un novato de JS. Tengo un temporizador de cuenta regresiva de 24 horas que se reinicia en la recarga de la página, sin embargo, quiero guardar el progreso de inicio usando LocalStorage para que finalice exactamente después de 24 horas. Lo que significa que no se detiene ni se reinicia tan pronto como ha comenzado, incluso cuando la página está cerrada. Siempre continuaría la cuenta regresiva cuando se visite la página. mi codigo esta abajo
<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>Para guardar algo en el almacenamiento local, puede usar localStorage.setItem(key, value)
Para obtener algo del almacenamiento local, puede usar 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()); }Usando luxon js y calculando como Millis versus manejando horas, minutos y segundos
// 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>