4

Cada vez que refresco la pagina pierdo los datos del localStorage, entiendo por el codigo que los almacena pero no se porque los pierde, ayuda, muchas gracias.

const ganarJuego = () =>{
    if(contadorC.length==2){
      alert("Ganaste en " + cronometro + " secs");
      document.getElementById("cronometro").innerHTML = "";
      let name = prompt("Introduce tu nombre");
      arrayGanadores.push({
        nombre: name,
        tiempo: cronometro
      });
      inicial = JSON.stringify(arrayGanadores);
      localStorage.setItem("aG", inicial);
      let listaG = JSON.parse(localStorage.getItem("aG"));
      document.getElementById("listaGanadores").innerHTML = mostrarGanadores(listaG);
      clearInterval(segundo);
      cronometro=0;
      cronometroClick = true;
    }
  }

  const mostrarGanadores = (listaG) =>{
    let lista="";
  for(let i=0; i<listaG.length; i++){
     lista += `${listaG[i].nombre}: ${listaG[i].tiempo} segundos<br>`
    }
    return lista;
  }
9
  • seria bueno que hagas un console.log() y muestres lo que sale
    – Christian
    Commented el 10 mar. 2021 a las 1:09
  • ¿Cual es el valor inicial de arrayGanadores?
    – Marcos
    Commented el 10 mar. 2021 a las 1:41
  • 2
    He observado un poco el código y lo que encontré es que no se comprueba si existe algo en localStorage. Lo que ocurre es que se inserta directamente el valor generado por las instrucciones escritas en la función antes de recuperarse. Primero, se debe comprobar, luego recuperar y parsear a JSON, actualizarlo cuando sea necesario y recuperarlo nuevamente cuando se necesite. Commented el 10 mar. 2021 a las 6:05
  • 2
    Para resumir un poco, estás sobrescribiendo primero antes de recuperar el valor existente, si lo hay. Commented el 10 mar. 2021 a las 6:08
  • 1
    Primero debes utilizar en localStorage el método getItrm antes que setItem y luego verificar si existe para enviar los datos obtenidos, si los hay al array antes de actualizarlo para posteriormente enviarlo a localStorage cuando necesites actualizarlo. Commented el 10 mar. 2021 a las 11:10

1 respuesta 1

1

Solo necesitas leer lo que haya guardado en localStorage al cargar la página, asignándolo a una variable que irás actualizando conforme avance el juego y guardando cuando sea necesario.

Revisa los comentarios y no dudes en preguntar si algo no quedó claro.

// Definir la lista de ganadores como variable global
let listaG;
// Cargar desde localStorage solo 1 vez, al cargar la página
document.addEventListener('DOMContentLoaded', () => {
    // Cargar desde localStorage o inicializar como arreglo vacío
    listaG = JSON.parse(localStorage.getItem("aG")) || [];
});

const ganarJuego = () => {
    if(contadorC.length==2) {
      alert("Ganaste en " + cronometro + " secs");
      document.getElementById("cronometro").innerHTML = "";
      let name = prompt("Introduce tu nombre");
      // Utiliza siempre la misma variable, no necesitas crear otras
      listaG.push({
        nombre: name,
        tiempo: cronometro
      });
      // Guarda los datos en localStorage
      localStorage.setItem("aG", JSON.stringify(listaG));

      // No necesitas volver a cargar, porque la lista se actualizó
      // Tampoco necesitas enviarla por parámetro al crear el HTML
      document.getElementById("listaGanadores").innerHTML = mostrarGanadores();
      clearInterval(segundo);
      cronometro=0;
      cronometroClick = true;
    }
}

// La función no recibe parámetro, también usa la variable global
const mostrarGanadores = () =>{
    let lista="";
    for(let i=0; i<listaG.length; i++){
        lista += `${listaG[i].nombre}: ${listaG[i].tiempo} segundos<br>`
    }
    return lista;
}

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.