¿Como mantener oculto un div mientras el usuario este navegando en el sitio web?

pedro56 · 4 Mar 2021

Hola comunidad 🧡

Tengo el siguiente código JavaScrtip que me ayuda a ocultar un div cuando doy un clic al botón:


function myFunction() {
    var x = document.getElementById("contenedor-principal");
    if (x.style.display === "none") {
        x.style.display = "block";
    } else {
        x.style.display = "none";
    }
}


<div id="contenedor-principal">
   
<div<p>Contenido...</p></div>

</div>
   
<button id="un-div" class="posicion" onclick="myFunction()">X</button>

Este div esta codificado para aparecer en todas las paginas de mi sitio web, el problema aquí es que cuando el usuario va a otras paginas del sitio web el div vuelve a aparecer.

Quiero que este div este oculto siempre mientra que el usuario este navegando por las paginas de mi sitio web, ya cuando el usuario cierre el sitio web y vuelva a abrirlo o entrar en el hay si quiero que vuelva a aparecer dicho div.

¿Me pueden ayuda?

pedro56 · 4 Mar 2021

¿Ayuda?

J0ss · 4 Mar 2021

puedes guardar una variable en una cookie de session que sirva como flag

pedro56 · 4 Mar 2021

J0ss dijo:
puedes guardar una variable en una cookie de session que sirva como flag

Me podrías decir como hacer esto?

pedro56 · 4 Mar 2021

¿Alguien me ayuda?

pedro56 · 4 Mar 2021

Ayuda!!!

pedro56 · 4 Mar 2021

Ayuda 😢

betoars · 4 Mar 2021

Puedes guardar una variable en el localstorage con Javascript.

betoars · 4 Mar 2021

Ejemplo : localStorage.setItem("ocultar ", "si");
Y después lo obtienes en cada página con: var variable = localStorage.getItem("ocultar ");
If(variable === si)
//ocultar contendió
else
//muestro contenido

pedro56 · 4 Mar 2021

Voy entendiendo @betoars

Pero como guardaría todo mi JavaScript en una variable?

pedro56 · 4 Mar 2021

Ayuda 😭

betoars · 4 Mar 2021

Seria algo asi:

JavaScript:

function myFunction() {
    var x = document.getElementById("contenedor-principal");
    
    if (x.style.display === "none") {
        x.style.display = "block";
        localStorage.setItem("ocultar ", false); // si el div esta oculto este se muestra y actulizamos la variable ocultar en el localstorage
    } else {
        x.style.display = "none";
        localStorage.setItem("ocultar ", true); //si el div se muestra este se oculta y actulizamos la variable ocultar en el localstorage
    }
}

//esta funcion la debes ejecutar al cargar tu pagina
function loadPage(){
 var ocultar =  localStorage.getItem("ocultar "); // obtnemos el valor de la varibale ocultar
 var x = document.getElementById("contenedor-principal");
 if(ocultar === undefined){  //comprobamos si la variable ocultar existe en localstorage si no existe se crea iniciando en false
 localStorage.setItem("ocultar ", false);
   }

 if(ocultar === false){ // si ocultar es false se muestra tu div
  x.style.display = "block";
 } else {
   x.style.display = "none";  // si ocultar es false se oculta tu div
   }
}

pedro56 · 4 Mar 2021

betoars dijo:

Seria algo asi:

JavaScript:

function myFunction() {
    var x = document.getElementById("contenedor-principal");
   
    if (x.style.display === "none") {
        x.style.display = "block";
        localStorage.setItem("ocultar ", false); // si el div esta oculto este se muestra y actulizamos la variable ocultar en el localstorage
    } else {
        x.style.display = "none";
        localStorage.setItem("ocultar ", true); //si el div se muestra este se oculta y actulizamos la variable ocultar en el localstorage
    }
}

//esta funcion la debes ejecutar al cargar tu pagina
function loadPage(){
var ocultar =  localStorage.getItem("ocultar "); // obtnemos el valor de la varibale ocultar
var x = document.getElementById("contenedor-principal");
if(ocultar === undefined){  //comprobamos si la variable ocultar existe en localstorage si no existe se crea iniciando en false
localStorage.setItem("ocultar ", false);
   }

if(ocultar === false){ // si ocultar es false se muestra tu div
  x.style.display = "block";
} else {
   x.style.display = "none";  // si ocultar es false se oculta tu div
   }
}

Bro, ya mismo voy a probar.

J0ss · 4 Mar 2021


<script type="text/javascript">
        function checkCookie(){
            if (document.cookie.split('; ').find(row => row.startsWith('ocultarDIV')))
                return true;
            return false;
        }
        function myFunction() {
            var x = document.getElementById("contenedor-principal");
            if (x.style.display === "none") {
                x.style.display = "block";
            } else {
                x.style.display = "none";
                document.cookie = "ocultarDIV=true; path=/;";
            }
        }
    </script>

<div id="contenedor-principal">  
<div>
<p>Contenido...</p>
</div>
</div>  
<script type="text/javascript">
        if (checkCookie())
            document.getElementById("contenedor-principal").style.display = "none";
 </script>
<button id="un-div" class="posicion" onclick="myFunction()">X</button>

pedro56 · 4 Mar 2021

J0ss dijo:
<script type="text/javascript"> function checkCookie(){ if (document.cookie.split('; ').find(row => row.startsWith('ocultarDIV'))) return true; return false; } function myFunction() { var x = document.getElementById("contenedor-principal"); if (x.style.display === "none") { x.style.display = "block"; } else { x.style.display = "none"; document.cookie = "ocultarDIV=true; path=/;"; } } </script> <div id="contenedor-principal"> <div> <p>Contenido...</p> </div> </div> <script type="text/javascript"> if (checkCookie()) document.getElementById("contenedor-principal").style.display = "none"; </script> <button id="un-div" class="posicion" onclick="myFunction()">X</button>

Me funciono este código...

Una pregunta.

¿Cuanto dura esta cookie?

¿Se puede configurar para que solo dure 24 horas?

J0ss · 4 Mar 2021

La cookie dura expira cuando cierra el navegador.

pedro56 · 4 Mar 2021

J0ss dijo:
<script type="text/javascript"> function checkCookie(){ if (document.cookie.split('; ').find(row => row.startsWith('ocultarDIV'))) return true; return false; } function myFunction() { var x = document.getElementById("contenedor-principal"); if (x.style.display === "none") { x.style.display = "block"; } else { x.style.display = "none"; document.cookie = "ocultarDIV=true; path=/;"; } } </script> <div id="contenedor-principal"> <div> <p>Contenido...</p> </div> </div> <script type="text/javascript"> if (checkCookie()) document.getElementById("contenedor-principal").style.display = "none"; </script> <button id="un-div" class="posicion" onclick="myFunction()">X</button>

Me funciono este código...

Una pregunta.

¿Cuanto dura esta cookie?

¿Se puede configurar para que solo dure 24 horas?

J0ss dijo:
La cookie dura expira cuando cierra el navegador.

Exceelente.

J0ss · 4 Mar 2021

Para que dure 24 horas es document.cookie = "ocultarDIV=true; max-age=86400; path=/;"

pedro56 · 4 Mar 2021

J0ss dijo:
Para que dure 24 horas es document.cookie = "ocultarDIV=true; max-age=86400; path=/;"

Con que dure cada vez que el usuario cierre el navegador me parece muy bien.

bits4me · 5 Mar 2021

te hice un pen

https://codepen.io/bits4me/pen/KKNxzbV

coloca el script en antes de </body>

¿Como mantener oculto un div mientras el usuario este navegando en el sitio web?

pedro56

pedro56

J0ss

pedro56

pedro56

pedro56

pedro56

betoars

betoars

pedro56

pedro56

betoars

pedro56

J0ss

pedro56

J0ss

pedro56

J0ss

pedro56

bits4me

Privacidad y transparencia

Privacidad y transparencia