Tengo muchos botones que cambian/agregan/eliminan elementos. Algunos de los elementos son dinámicos, por ejemplo, hacer clic en el botón uno creará el botón dos , etc.
Me gustaría guardar el estado de los botones o la página en el almacenamiento local. Si hice clic en el botón uno y luego en el dos, el fondo ahora es rojo. Cuando el visitante regrese (después de cerrar el navegador) será como si ya hubiera hecho clic en uno>dos y verá el fondo rojo como antes.
He estado leyendo Mozilla setItem y todas las publicaciones en Stackoverflow sobre el almacenamiento local, pero no puedo encontrar ningún ejemplo de este escenario exacto. https://jsfiddle.net/oh9q2Lzw/1/
$('.one').on('click', function() { $('.blue').removeClass('blue').addClass('green'); }); $('.two').on('click', function() { $('.green').removeClass('green').addClass('red'); }); button { padding: 10px 40px; } .blue { width: 200px; padding: 20px; background: blue } .green { width: 200px; padding: 20px; background: green } .red { width: 200px; padding: 20px; background: red } <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.js"></script> <br> <div class="box"> <button class="one">one</button> <button class="one">one</button> <button class="two">two</button> </div> <br> <div class="blue"></div> <br> <div class="blue"></div>En su ejemplo, la única memoria que necesita la página es el nombre de clase de los divs aplicados cuando se cambió el estilo por última vez.
Por lo tanto, la solución simple es almacenar el nombre de la clase en el almacenamiento local cada vez que cambia modificando los eventos de su botón de la siguiente manera:
$('.one').on('click', function() { $('.blue').removeClass('blue').addClass('green'); localStorage.setItem("div-class", "green"); }); $('.two').on('click', function() { $('.green').removeClass('green').addClass('red'); localStorage.setItem("div-class", "red"); });Cuando se carga la página, la clase codificada de forma rígida siempre es "azul" y, por lo tanto, esto se puede cambiar si se almacena un valor en el almacenamiento local.
Esto se hace agregando una función al evento window.onload :
window.onload = function() { if (localStorage.getItem("div-class")) { $('.blue').removeClass('blue').addClass(localStorage.getItem("div-class")); } };La herramienta SO snippet no permite el acceso al almacenamiento local, pero modifiqué su violín JS con un ejemplo de trabajo: https://jsfiddle.net/g5wqjo2h/
También hice una versión modificada con un botón adicional para permitirle borrar localStorage durante el desarrollo. Si se hace clic en el botón clear memory , la próxima vez que se ejecute o se cargue js Fiddle, los divs volverán a la clase azul predeterminada. De lo contrario, el color anterior se carga desde localStorage. : https://jsfiddle.net/g5wqjo2h/1/