Tengo un div que mostrará el mensaje de éxito después de un inicio de sesión exitoso y se ocultará después de 4 segundos. El código js utilizado es
document.getElementById('success').style.display = 'none'; }, 4000);Esto funciona bien. Pero este div aparecerá cada vez que navegue a la página de inicio y no quiero que eso suceda. Este div debe estar en estado oculto hasta que se desconecte y se vuelva a conectar. Sería mejor tener una solución que no use jquery ya que este es un proyecto. También probé sessionStorage, pero eso oculta el div inmediatamente después de mostrarlo y no dura 4 segundos.
Gracias por adelantado
const alreadyShown = localStorage.getItem('alreadyShown'); if (alreadyShown === 'true') { document.getElementById('success').style.display = 'none'; } setTimeout(() => { localStorage.setItem('alreadyShown', 'true'); document.getElementById('success').style.display = 'none'; }, 4000);puede usar js localStorage . localStorage es similar a sessionStorage , excepto que mientras que los datos de localStorage no tienen tiempo de caducidad
Puedes hacer algo como esto:
Para comprobar si el usuario ha iniciado sesión correctamente, puede configurar un par clave/valor en el almacenamiento de la sesión después de iniciar sesión correctamente. eliminaremos este par clave/valor cuando nos desconectemos del sitio web.
Entonces, cuando el usuario redirige a la página de inicio, lo primero que haremos será verificar si la clave "iniciar sesión" está allí en el almacenamiento de la sesión o no.
const isLoggedIn = sessionStorage.getItem('loggedIn'); if(!isLoggedIn) { document.getElementById('success').style.display = 'block'; setTimeout(() => { document.getElementById('success').style.display = 'none'; sessionStorage.setItem('loggedIn', true); }, 4000); }Entonces, ahora, en la primera vez que el usuario redirige a la página de inicio, se mostrará el mensaje de éxito y la tecla "iniciar sesión" se establecerá en el almacenamiento de la sesión. si el usuario vuelve a dirigir a la página de inicio, habrá una clave, por lo que no mostraremos el mensaje. ahora todo lo que necesita hacer es eliminar esta clave "loggedIn" del almacenamiento de la sesión cada vez que cierre la sesión. Puede eliminar la clave por
sessionStorage.removeItem('loggedIn');ahora la clave se elimina después de cerrar la sesión. mostrará el mensaje de éxito en el lomo exitoso por primera vez.
Haga que la visualización no sea ninguna de forma predeterminada y alterne para bloquear cuando sea necesario
Puede lograr el comportamiento requerido invirtiendo su implementación.
Establecer visualización en ninguno de forma predeterminada
Convertir a bloque después de hacer clic en inicio de sesión y autenticación
Configure un temporizador durante 4 segundos (para mostrar el mensaje de inicio de sesión)
Vuelva a establecer la visualización en ninguno.
document.getElementById("app").style.display = "block"; setTimeout( () => (document.getElementById("app").style.display = "none"), 4000 );