function myFunction() { { var element = document.getElementById("body"); element.classList.toggle("bdark"); } { var element = document.getElementById("theader"); element.classList.toggle("hdark"); } { var element = document.getElementById("sh"); element.classList.toggle("shh"); } { var x = document.getElementById("hs"); if (x.style.display === "block") { x.style.display = "none"; } else { x.style.display = "block"; } } } .bdark { background-color: #333; color: white; } .hdark { background-color: black; color: white; } .shh { display: none; } .hs { display: none; } <body id="body" class="light"> <p id="theader">Click the "Try it" button to toggle between adding and removing the class names</p> <button onclick="myFunction()">Try it</button> <div id="myDIV"> This is a DIV element. </div> <div> <div id="sh" class="sh">dark black</div> <div id="hs" class="hs">light white</div> </div>Quiero que se guarde su clase para que cuando actualice o vuelva a abrir la página sea la misma clase que tenía cuando me fui. o algún código alternativo que funcione igual. Gracias por leer esto. :)
Puede utilizar el almacenamiento local. Es muy simple y mejor que las cookies.
por ejemplo, para establecer el color bg del elemento (en carga):
if(localStorage.getItem("color") == "black") { element.classList.add("dark"); }y en su función agregue:
localStorage.setItem("color",black or white )Nota: debe agregar una declaración if en su función para verificar si el elemento de almacenamiento local establecido de clase disponible está configurado en negro o no
agregue esto al final del archivo jquery (Mrbg => mr babak golbaharan :))
$.extend({ MrbgSetCookie:function(name,value,days){ var expires = ''; if (days) { var date = new Date(); date.setTime(date.getTime() + (days*24*60*60*1000)); expires = "; expires=" + date.toUTCString(); } document.cookie = name + "=" + (value || "") + expires + "; path=/"; }, MrbgGetCookie:function(name){ var nameEQ = name + "="; var ca = document.cookie.split(';'); for(var i=0;i < ca.length;i++) { var c = ca[i]; while (c.charAt(0)==' ') c = c.substring(1,c.length); if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length); } return null; }, MrbgRemoveCookie:function(name){ document.cookie = name+'=; Max-Age=-99999999;'; }, });ahora puede usar esto para establecer, obtener y eliminar cookies como esta
$.MrbgSetCookie( 'cookieName', 'cookieValue' , 'period in day' );en este caso:
element = document.getElementById("body"); element.classList.toggle("bdark"); ( element.classList.contains('bdark') )? $.MrbgSetCookie( yourElementID, 'bdark' , 365 ): $.MrbgRemoveCookie(yourElementID );