Estoy escribiendo una función que me ahorra algunas variables persistentes en el tiempo (no tengo backend y no lo necesito para este ejercicio), pero noto que la primera variable "easy30" la guarda en el html y cada vez que recargo la página permanece visible, mientras que la segunda variable "easy60" no permanece. Solo me lo guarda la primera vez y si vuelvo a cargar la pagina desaparece... porque? ¡Básicamente hago exactamente lo mismo para ambas variables!
const easy30 = document.getElementById('easy-30'); const easy60 = document.getElementById('easy-60'); function saveScoreAndTime(score, time, difficulty) { //EASY 30 SECONDS var totalScore30 = localStorage.getItem('score30'); if ( totalScore30 === null || (+score > +totalScore30 && +time === 30 && difficulty === 'easy') ) { localStorage.setItem('score30', score); let newEasy30Score = localStorage.getItem('score30'); easy30.textContent = newEasy30Score; } //EASY 60 SECONDS var totalScore60 = localStorage.getItem('score60'); if ( totalScore60 === null || (+score > +totalScore60 && +time === 60 && difficulty === 'easy') ) { localStorage.setItem('score60', score); let newEasy60Score = localStorage.getItem('score60'); easy60.textContent = newEasy60Score; } }
Así que hay un problema con tu código.
La razón por la que está obteniendo el nodo HTML en lugar del valor es porque está apuntando al nodo HTML y olvidó agregar el HTML innerHTML
entonces, en su caso, debe hacer const easy30 = document.getElementById("easy-30").innerHTML;
para obtener el valor de ese nodo HTML
también aquí hay un ejemplo para obtener y configurar el almacenamiento local
const easy30 = document.getElementById("easy-30"); const easy60 = document.getElementById("easy-60"); console.log("easy30", easy30.innerHTML); console.log("easy60", easy60.innerHTML); const init = async () => { const score30 = await localStorage.getItem("easy30"); console.log("score30", score30); const score60 = await localStorage.getItem("easy60"); console.log("score30", score60); }; init(); const setLocalStorage = async (key) => { localStorage.setItem(key, 30); }; setLocalStorage("score30"); setLocalStorage("score60");
y aquí hay un fragmento de codesandbox