1

Tengo una web en la que necesito ocultar y mostrar elementos del menú principal a voluntad. El código me funciona bien, pues logro ocultar el elemento del menú así como mostrarlo llamando a una función respectivamente que cambia el modo del estilo del display en CSS. El problema que no logro solucionar, es como mantener las opciones elegidas aunque refresque la página (si lo hago, los cambios desaparecen). Lo he intentando con localStorage pero no se como hacer que funcione.

function ocultar() {
  document.getElementById('mega-menu-item-1525').style.display = 'none';
}

function mostrar() {
  document.getElementById('mega-menu-item-1525').style.display = 'block';
}
.mega-menu-item-1525 {
  display: none;
}
<button id="boton_Mostrar" onclick="mostrar();">Mostrar elemento del menú</button> 
<div id="mega-menu-item-1525">
  <button id="boton_ocultar" onclick="ocultar();">Ocultar elemento del menú</button>
</div>

2 respuestas 2

1

Podes hacerlo con el LocalStorage de esta manera:

if(localStorage.getItem('hidden') == 'true') {
  document.getElementById('mega-menu-item-1525').style.display = 'none';
}

function ocultar() {
  document.getElementById('mega-menu-item-1525').style.display = 'none';
  localStorage.setItem('hidden', 'true')
}

function mostrar() {
  document.getElementById('mega-menu-item-1525').style.display = 'block';
  localStorage.setItem('hidden', 'false')
}
    
.mega-menu-item-1525 {
  display: none;
}
  <button id="boton_Mostrar" onclick="mostrar();">Mostrar elemento del menú</button>
  <div id="mega-menu-item-1525">
    <button id="boton_ocultar" onclick="ocultar();">Ocultar elemento del menú</button>
  </div>
2
  • ¡ Genial !. Funciona perfecto las dos soluciones. Muchas gracias !!!
    – MAC
    el 26 abr. a las 21:41
  • @infinit3Loop. El mismo problema comentado anteriormente a Cris223511.dev , te lo refiero a ti. Gracias
    – MAC
    el 27 abr. a las 19:58
1

Puedes apoyarte de localstorage y del valor booleano que vamos almacenar.

Solo indicamos que al cargar todo el contenido HTML, se ejecute el listener y llame a la función evaluar(). La función solo evalúa el estado del localstorage almacenado, y dependiendo a esto, oculta o no al botón.

Ejemplo (explicación en comentarios):

function ocultar() {
  document.getElementById('mega-menu-item-1525').style.display = 'none';
  localStorage.setItem('boton-oculto', false);
}

function mostrar() {
  document.getElementById('mega-menu-item-1525').style.display = 'block';
  localStorage.setItem('boton-oculto', true);
}

function verificar() {
  // Obtengo el valor de "boton-oculto" del localStorage.
  let oculto = localStorage.getItem('boton-oculto');
  
  // Luego verifico si "boton-oculto" está almacenado en el localStorage, si no lo está, trae "null".
  if (oculto !== null) {
    // Aquí convierto el valor de "boton-oculto" a booleano (ya que el valor viene como cadena).
    oculto = (oculto === 'true');
    console.log(oculto);
    // Y por último, dependiendo al booleano, actualizo el estado del div.
    if (oculto) {
      document.getElementById('mega-menu-item-1525').style.display = 'block';
    } else {
      document.getElementById('mega-menu-item-1525').style.display = 'none';
    }
  }
};

document.addEventListener('DOMContentLoaded', verificar);
<button id="boton_Mostrar" onclick="mostrar();">Mostrar elemento del menú</button> 
<div id="mega-menu-item-1525">
  <button id="boton_ocultar" onclick="ocultar();">Ocultar elemento del menú</button>
</div>

Puedes verlo funcionar aquí (no funciona en incógnito).

7
  • Una última cuestión @Cris223511.dev. Si bien el código funciona perfectamente, lo hace cuando abro sesión como administrador y ejecuto el código en esa misma página del navegador. Sin embargo, no funciona cuando abro otra pestaña en el mismo navegador o en otro, aunque se mantenga el mismo rol .
    – MAC
    el 27 abr. a las 19:46
  • ... de igual forma, si abro sesión con otro rol no funciona. Lo que pretendo es que muestre u oculte un elemento del menú cuando un usuario acceda con cualquier rol. No se, si puede ser debido a que en lugar de utilizar LocalStorage sea Sessionstorage ??. Agradezco nuevamente la ayuda.
    – MAC
    el 27 abr. a las 19:54
  • Puede que sí, reemplaza todos los localStorage por sessionStorage, me avisa. el 27 abr. a las 19:58
  • Nada... no mantiene la opción seleccionada. Si abro la web en otra pestaña y refresco la página no funciona.
    – MAC
    el 27 abr. a las 20:36
  • @MAC quizás te convendría formular otra pregunta, originalmente sabíamos que lo que buscabas era que se mantenga el elemento del menú al recargar la pagina, nada sabíamos del rol. Si hubieses aclarado eso no habríamos respondido o sino habríamos respondido mejor, te falto aclarar eso el 27 abr. a las 23:33

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.