Tengo una casilla de verificación que puede ocultar el encabezado al presionarlo. También hice que guarde el estado en localStorage cuando está marcado (para que no se reinicie después de volver a cargar la página). Pero incluso si se muestra como marcado después de volver a cargar la página y obtener el estado de localStorage, el encabezado no está oculto. ¿Hay alguna manera de hacer que funcione?
<div class="new-hide-header"><input id="chck" type="checkbox"> <label for="chck" class="check-trail"> <span class="check-handler"></span> </label> </div> <script> document.getElementById('chck').onclick = function() { divTest = document.getElementById('ast-desktop-header'); divTest2 = document.getElementById('ast-mobile-header'); var mq = window.matchMedia("(max-width: 921px)"); if (mq.matches) { // window width is at less than 570px if (divTest2.style.display === "none") { divTest2.style.display = 'block'; } else { divTest2.style.display = "none"; } } // window width is more than 570px else { if (divTest.style.display === "none") { divTest.style.display = 'block'; } else { divTest.style.display = "none"; var checkbox = document.getElementById('chck'); localStorage.setItem('chck', checkbox.checked); } } } </script> <script> function load() { var checked = JSON.parse(localStorage.getItem('chck')); document.getElementById("chck").checked = checked; } load(); </script>Llame a la función onclick después de establecer la propiedad marcada en load()
Los fragmentos de pila no brindan acceso a localStorage y no se proporcionó ningún encabezado html, por lo que el siguiente es un ejemplo simplificado
const chckbox = document.getElementById('chck') chckbox.onclick = function() { const isChecked = this.checked; console.log('isChecked =', isChecked); } function load() { chckbox.checked = true; chckbox.onclick(); } load() <input type="checkbox" id="chck">