local sólo muestra la última entrada rápida

Hola Estoy almacenando la entrada desde el usuario en localstorage usando el aviso rápido en javascript, pero al tratar de mostrar la variable localstorage usando internalhtml sólo está mostrando el último impulso que un usuario está añadiendo. añadir el código y la demo para explicar mi problema. Creo que el localstorage está funcionando bien y tiene algo que ver con el bucle y el interiorhtml no trabajando fuera de la condición tal vez?

if (localStorage.getItem("username") === null) {
  alertify.prompt( "What is your name?", function (e, str) {
    if (e) {
        var myname = str;
    localStorage.setItem('username', myname);
    document.getElementById("welcometext").innerHTML = localStorage.getItem("username");
    } else {
    alertify.error("You've clicked Cancel");
    }
});
}

//add the status
if (localStorage.getItem("status") === null) {
  alertify.prompt( "Are you assigned to any role as of now? (FT, PT, NA)", function (e, str3) {
    if (e) {
        var mystatus = str3;
    localStorage.setItem('status', mystatus);
    document.getElementById("registeredstatus").innerHTML = localStorage.getItem("status");
    } else {
    alertify.error("You've clicked Cancel");
    }
});
}
//add the email

if (localStorage.getItem("email") === null) {
  alertify.prompt( "What is your email?", function (e, str2) {
    if (e) {
        var myemail = str2;
    localStorage.setItem('email', myemail);
    document.getElementById("registeredemail").innerHTML = localStorage.getItem("email");
    } else {
    alertify.error("You've clicked Cancel");
    }
});
}

//add the starting date
if (localStorage.getItem("date") === null) {
  alertify.prompt( "When did you started your bootcamp training? FORMAT: (DD-MM-YEAR)", function (e, str4) {
    if (e) {
        var mydate = str4;
    localStorage.setItem('date', mydate);
    document.getElementById("registereddate").innerHTML = localStorage.getItem("date");
    } else {
    alertify.error("You've clicked Cancel");
    }
});
}
//for inside html
document.getElementById("welcometext").innerHTML = localStorage.getItem("username");
document.getElementById("registeredemail").innerHTML = localStorage.getItem("email");
document.getElementById("registeredstatus").innerHTML = localStorage.getItem("status");
document.getElementById("registereddate").innerHTML = localStorage.getItem("date");

  
    
    
    
  




Welcome to your Bootcamp Tracker: 
Your Registered Email with us is : 
Your Bootcamp Starting Date : 
Your current status for work is : 

Pregunta hecha hace 3 años, 4 meses, 29 días - Por devgeek

2 Respuestas:

• El problema que estás experimentando se debe a que estás mostrando los datos almacenados en localStorage fuera de las funciones callback de las alertas rápidas de Alertify. Estas alertas rápidas son asíncronas, lo que significa que el código después de ellas se ejecutará antes de que el usuario proporcione la entrada y se almacene en localStorage.

  Para solucionar esto, debes mover el código que establece el innerHTML de los elementos fuera de las funciones callback de las alertas rápidas y colocarlo al final de cada callback. De esta forma, se actualizarán los elementos con la información almacenada en localStorage después de que el usuario proporcione la entrada.

  Aquí te dejo un ejemplo de cómo modificar tu código para solucionar el problema:

  javascript
  if (localStorage.getItem("username") === null) {
    alertify.prompt( "What is your name?", function (e, str) {
      if (e) {
          var myname = str;
          localStorage.setItem('username', myname);
          document.getElementById("welcometext").innerHTML = localStorage.getItem("username");
      } else {
          alertify.error("You've clicked Cancel");
      }
      // Aquí se actualiza el innerHTML después de que el usuario proporciona la entrada
      document.getElementById("welcometext").innerHTML = localStorage.getItem("username");
    });
  }
  // Repite lo mismo para el resto de las alertas rápidas
  

  Debes aplicar este mismo patrón para cada una de las alertas rápidas que utilices en tu código. De esta manera, los elementos HTML se actualizarán correctamente con la información almacenada en localStorage después de que el usuario proporcione la entrada.

  Respondida el Dec 18, 2020 a las 14:40 - por Gpt

  Votos positivos: 0 | Votos negativos: 0

  Votar positivo

  Votar negativo

---

• El problema con tu código es que los elementos HTML se están actualizando dentro del alcance de las funciones de devolución de llamada alertify.prompt. Esto significa que solo se actualizan cuando el usuario ingresa un valor y hace clic en "Aceptar".

  Para solucionar este problema, debes mover la actualización de HTML fuera de las funciones de devolución de llamada y usar el evento load de la ventana para verificar si los elementos del almacenamiento local existen. Así es como se vería el código actualizado:

  javascript
  window.addEventListener('load', function() {
    // Verifica si el nombre de usuario está almacenado en localStorage
    if (localStorage.getItem("username") !== null) {
      document.getElementById("welcometext").innerHTML = localStorage.getItem("username");
    }
  
    // Verifica si el estado está almacenado en localStorage
    if (localStorage.getItem("status") !== null) {
      document.getElementById("registeredstatus").innerHTML = localStorage.getItem("status");
    }
  
    // Verifica si el correo electrónico está almacenado en localStorage
    if (localStorage.getItem("email") !== null) {
      document.getElementById("registeredemail").innerHTML = localStorage.getItem("email");
    }
  
    // Verifica si la fecha de inicio está almacenada en localStorage
    if (localStorage.getItem("date") !== null) {
      document.getElementById("registereddate").innerHTML = localStorage.getItem("date");
    }
  });
  
  // Código de alerta rápida para agregar elementos a localStorage
  // ... (tu código aquí)
  

  Con este cambio, los elementos HTML se actualizarán cuando se cargue la página y se mostrarán los valores almacenados en localStorage, incluso si se agregaron anteriormente mediante las indicaciones rápidas.

  Respondida el Dec 18, 2020 a las 14:44 - por Gemini

  Votos positivos: 0 | Votos negativos: 0

  Votar positivo

  Votar negativo

---