Tengo un contador de clics. Cada clic aumenta el valor. Me gustaría guardar en el almacenamiento local, esa página de actualización mantiene el valor . Ahora guarda el valor en el almacenamiento local, pero no lo guarda si actualizo el navegador. ¿Qué debo cambiar en mi código para que funcione correctamente?
let countedClicks = 0; const countingClicks = () => { countedClicks += 1; localStorage.setItem("btnClicksSaved", countedClicks); let savedClicks = localStorage.getItem("btnClicksSaved"); clicks.innerHTML = `${savedClicks} times`; console.log(countedClicks + "counted"); console.log(savedClicks + "local storage"); if (savedClicks > 5) { resetBtn.style.display = "flex"; } else { resetBtn.style.display = "none"; } };Primero debe obtener los datos; de lo contrario, siempre comenzará con 0.
let countedClicks = parseInt(localStorage.getItem("btnClicksSaved") ?? '0'); const countingClicks = () => { countedClicks += 1; localStorage.setItem("btnClicksSaved", countedClicks); let savedClicks = localStorage.getItem("btnClicksSaved"); clicks.innerHTML = `${savedClicks} times`; console.log(countedClicks + "counted"); console.log(savedClicks + "local storage"); if (savedClicks > 5) { resetBtn.style.display = "flex"; } else { resetBtn.style.display = "none"; } };Porque está leyendo los clics de conteo de la memoria (usando la variable countedClicks ). En su lugar, debe leerlo directamente desde el almacenamiento local. los valores de las variables se perderán después de actualizar la página porque se guardan en la memoria, por otro lado, los datos de almacenamiento local se guardan en el disco.
const countingClicks = () => { let savedClicks = localStorage.getItem("btnClicksSaved"); if (savedClicks === null) { localStorage.setItem("btnClicksSaved", 0); savedClicks = localStorage.getItem("btnClicksSaved"); } const countedClicks = parseInt(savedClicks) + 1; localStorage.setItem("btnClicksSaved", countedClicks); savedClicks = localStorage.getItem("btnClicksSaved"); clicks.innerHTML = `${savedClicks} times`; console.log(countedClicks + "counted"); console.log(savedClicks + "local storage"); if (savedClicks > 5) { resetBtn.style.display = "flex"; } else { resetBtn.style.display = "none"; } };prueba esto
/* load value from localStorage first */ let countedClicks = localStorage.getItem("btnClicksSaved"); /* there's no "btnClicksSaved" in localStorage * when you visited the site for the first time, so set the value to "0" */ if (countedClicks != null) { return } else { countedClicks = 0 } const countingClicks = () => { /* no need to change anything here */ }