Tengo una secuencia de comandos CountUp en la que he especificado el número desde el que debe comenzar y dónde debe dejar de contar. Esto funciona bien, sin embargo, he intentado usar localStorage.setItem para guardar el progreso, de modo que cuando el usuario actualice la página o la abandone y regrese, el contador no se actualice sino que siga ejecutándose. No parece funcionar para mí, es cierto que todavía estoy tratando de luchar con Javascript siendo un novato. Su ayuda será muy apreciada, gracias. A continuación se muestra mi código
<script type="text/javascript"> function countUp() { var countEl = document.querySelector('.counter'); var countBar = document.querySelector('.progress-bar'); var x = 1; var y = countEl.dataset.to; var z = countBar.dataset.to; function addNum() { countEl.innerHTML = x; x += 1; if (x > y && x > z) { clearInterval(timer); toggleBtn.classList.remove('hidden'); } } var timer = window.setInterval(addNum, 800); localStorage.setItem("addNum", counter); toggleBtn.addEventListener('click', function(){ countUp(); toggleBtn.classList.add('hidden'); }); } countUp();</script> <script src="//code.jquery.com/jquery-latest.min.js"></script></head> <body onload=countUp();> <div class="counter" data-from="0" data-to="100"></div> <div class="progress-bar" data-from="0" data-to="100"></div>Gracias en anticipación de un puntero correcto.
Cambie su línea var x a:
var x = parseInt(localStorage.getItem('lastCount')) - 1 || 1; Cambie la función addNum() a:
function addNum() { countEl.innerHTML = x; x += 1; if (x > y && x > z) { clearInterval(timer); toggleBtn.classList.remove('hidden'); } localStorage.setItem('lastCount', x); }https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage
Este no es un conteo 'real' en segundo plano. La idea aquí es diferenciar entre la última y la última marca de tiempo.
var x a: var x = getCounter();getCounter() : function getCounter() { if(localStorage.getItem('lastCount')) { let counter = (Math.floor(Date.now() /1000) - parseInt(localStorage.getItem('lastTimestamp'))) + parseInt(localStorage.getItem('lastCount')); return (counter > 100) ? 100: counter } return 1; }Nota: El contador no excederá 100.
data-to="100"
addNum() : localStorage.setItem('lastCount', x); localStorage.setItem('lastTimestamp', Math.floor(Date.now() / 1000));