Estoy tratando de crear un contador de clics usando HTML y JavaScript y quiero conservar el valor del número después de actualizar la página.
Entiendo el hecho de que tengo que usar el almacenamiento local para eso y he logrado almacenar el valor y mostrarlo después de actualizar la página, pero cuando hago clic en el botón nuevamente, comienza el conteo desde 0 y no sé cómo. para resolver este problema. Quiero que conserve el valor y continúe contando incluso si se actualiza la página.
Código HTML:
<div> <p id="display">0</p> <button onclick="increase()">increase</button> <button onclick="decrease()">decrease</button> </div>Código JavaScript:
let display=document.getElementById("display") let count = 0 function increase(){ count=count+1 display.textContent=count localStorage.setItem("count", JSON.stringify(count)) } display.textContent=localStorage.getItem("count") function decrease(){ count=count-1 display.textContent=count }let display=document.getElementById("display"); // Here was a mistake, you don't need to reset counter each time let count = localStorage.getItem("count") ? +localStorage.getItem("count") : 0; function increase(){ count=count+1 display.textContent=count localStorage.setItem("count", JSON.stringify(count)) } display.textContent=localStorage.getItem("count") function decrease(){ count=count-1 display.textContent=count }intente con el fragmento anterior.
let display=document.getElementById("display") let count = Number(localStorage.getItem("count")) // here function increase(){ count=count+1 display.textContent=count localStorage.setItem("count", JSON.stringify(count)) } display.textContent = count // and here function decrease(){ count=count-1 display.textContent=count }Actualicé dos líneas de su código que se comenta.
Primero debe establecer la variable de count con el valor de localStorage .
cuando se cargue la ventana, obtenga el valor de conteo del almacenamiento local e inicie la variable de conteo después de eso, muestre ese valor de conteo
const display = document.getElementById("display"); let count = 0; window.onload = () => { count = localStorage.getItem("count") ? JSON.parse(localStorage.getItem("count")) : 0; display.textContent = count; }; function increase() { count = count + 1; display.textContent = count; localStorage.setItem("count", JSON.stringify(count)); } function decrease() { count = count - 1; display.textContent = count; localStorage.setItem("count", JSON.stringify(count)); }