0

El problema es el siguiente:

Tengo un div en mi Index que quiero que se muestre solo cuando se carga la página por primera vez, dicho Div tiene un botón de Entrar, una vez que entra a la página, este div se oculta y aparece el resto del contenido de mi Index. El problema es que si voy a otra sección de la página y quiero regresar al inicio, el Div que estaba oculto vuelve a aparecer y debo nuevamente Entrar a la página.

Estoy utilizando el evento onclick en dicho div.

<section>
<div id="enter">
<img class="onoOne" src="img/ono_white.svg" alt="">
<input type="button" value="Enter" id="btnEnter" onclick="hide()" >
</div>
</section>

<script>
const btnEnter = document.querySelector("#btnEnter");

function hide(){
btnEnter.style.display = "none";
 }
</script>
3
  • Si no lo necesitas en esa otra página, con no poner el div en el html, debería bastarte. O es una página dinámica? Commented el 21 mar. 2019 a las 13:43
  • Supongo que estás trabajando con páginas puras de HTML. En ese caso te recomiendo almacenar en el navegador un valor, por ejemplo, 'divMostrado=true'. Y cada vez que cambies de página lees este valor.
    – Legna
    Commented el 21 mar. 2019 a las 13:48
  • w3schools.com/jsref/prop_win_localstorage.asp
    – Legna
    Commented el 21 mar. 2019 a las 13:50

2 respuestas 2

1

Lo que puedes hacer es almacenar una variable en el localStorage del navegador, luego verificar si existe esa variable.

Prueba el siguiente código:

const btnEnter = document.querySelector("#btnEnter");

if(localStorage.getItem("btn")){
    btnEnter.style.display = "none";
}else{
    function hide(){
        localStorage.setItem("btn", true);
        btnEnter.style.display = "none";
    }
}
<section>
    <div id="enter" style="padding-top: 200px">
        <img class="onoOne" src="img/ono_white.svg" alt="">
        <input type="button" value="Enter" id="btnEnter" onclick="hide()" >
    </div>
</section>

Nota: Stackoverflow no me permite almacenar datos en localStorage.

2
  • Muchas gracias, me ha funcionado perfectamente. Commented el 22 mar. 2019 a las 0:28
  • Que bueno, saludos. Commented el 22 mar. 2019 a las 14:02
1

La solución más fácil a tu problema es utilizar sessionStorage. En el puedes guardar una variable por ejemplo para saber si esta persona se le ha mostrado ya este boton.

En la función hide() añade una línea tal que sessionStorage.visitado = "true" (tanto en session como en local, solo se guardan Strings). Y luego en el index haz una comprobación de si esta variable existe o no if (sessionStorage.visitado === "true")y pinta el div en consecuencia.

También podrías hacerlo con cookies por si quieres echarle un vistazo.

Un saludo!

1
  • Muchas gracias! Me ha funcionado usar el sessionStorage. Commented el 22 mar. 2019 a las 0:24

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.