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

  • Autor Autor pedro56
  • Fecha de inicio Fecha de inicio
pedro56

pedro56

Zeta
Verificación en dos pasos activada
Verificado por Whatsapp
¡Usuario popular!
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?
 
¿Ayuda?
 
puedes guardar una variable en una cookie de session que sirva como flag
 
¿Alguien me ayuda?
 
Ayuda!!!
 
Ayuda 😢
 
Puedes guardar una variable en el localstorage con Javascript.
 
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
 
Voy entendiendo @betoars

Pero como guardaría todo mi JavaScript en una variable?
 
Ayuda 😭
 
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
   }
}
 
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
   }
}
Hacer clic para expandir...
Bro, ya mismo voy a probar.
 
<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>
 
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>
Hacer clic para expandir...
Me funciono este código...

Una pregunta.

¿Cuanto dura esta cookie?

¿Se puede configurar para que solo dure 24 horas?
 
La cookie dura expira cuando cierra el navegador.
 
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>
Hacer clic para expandir...
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.
Hacer clic para expandir...
Exceelente.
 
Para que dure 24 horas es document.cookie = "ocultarDIV=true; max-age=86400; path=/;"
 
J0ss dijo:
Para que dure 24 horas es document.cookie = "ocultarDIV=true; max-age=86400; path=/;"
Hacer clic para expandir...
Con que dure cada vez que el usuario cierre el navegador me parece muy bien.
 
Hay que estar conectado o registrado para responder aquí.
Atrás
Arriba