Este jQuery funciona muy bien para cambiar el color de fondo de todos mis divs con la misma clase (userNumber1), cuando marco su casilla de verificación, pero necesito que también guarde estos cambios en localStorage , para estar allí cada vez que la página es nueva. cargado.
Después de buscar durante una semana en SO, probé varias opciones diferentes que encontré, pero ninguna funciona correctamente. Si bien en la mayoría de los casos todavía puedo cambiar el color de fondo, algunos de ellos guardan solo la casilla de verificación marcada pero no el color de fondo, otros hacen lo contrario, pero la mayoría de ellos no guarda ninguno de los dos en localStorage.
Como no soy un experto en absoluto, realmente no sé qué más hacer ahora.
Esta es mi función jQuery:
jQuery(document).ready(function($) { $('#option1').on('change', function() { if ($(this).is(':checked')) { $(".userNumber1").css('background-color', "#a7ddff"); } else { $(".userNumber1").css('background-color', "#ffffff"); } }) })y este es mi código HTML:
<div class="userNumber1"><input type="checkbox" id="option1"><label for="option1"></label></div>Estoy totalmente abierto a cualquier enfoque diferente, siempre que pueda guardar el nuevo color de fondo y la casilla de verificación marcada/desmarcada en localStorage .
Gracias de antemano por su amable apoyo.
Aquí hay una versión funcional: no podemos probar localStorage en Stackoverflow debido a la zona de pruebas
https://plungjan.name/SO/lschk/
Debe convertir una cadena almacenada "verdadero" o "falso" en booleano
Guion
// assuming a not set localStorage means a not checked checkbox at load time let un1 = localStorage.getItem("userNumber1") un1 = un1 === null ? false : un1 === "true"; // convert the string stored to boolean jQuery(document).ready(function($) { const $opt1 = $('#option1'); const changeColor = () => { // make a reusable function const chk = $opt1.is(':checked'); localStorage.setItem("userNumber1", chk) $(".userNumber1").css({ "background-color": chk ? "lightblue" : "yellow" }) }; $opt1 .prop("checked", un1) // set the value from localStorage .on('change', changeColor); // assign the listener changeColor(); // trigger the initial })CSS
.userNumber1 { background-color: yellow; }HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <div class="userNumber1"> <label><input type="checkbox" id="option1">Check me</label> </div>Establezca una clave de almacenamiento local con su valor cuando el usuario haga clic en una opción:
localStorage.setItem('backgroundColor', '#FF00BB'); localStorage.setItem('optionId', 'option1');Recupera el valor cuando se carga la página. También marque la casilla correspondiente:
$('.userNumber1').css('background-color', localStorage.getItem('backgroundColor')); $('#'+localStorage.getItem('optionId')).prop('checked', true);Fuente: configuración "marcada" para una casilla de verificación con jQuery
jQuery(document).ready(function($) { const myData = localstorage.getItem('myData') ? JSON.parse(localstorage.getItem('myData')) : {'checked':false,'backgroundColor':'#ffffff'}; $("#option1").attr('checked', myData.checked); $(".userNumber1").css('background-color', myData.backgroundColor); $('#option1').on('change', function() { myData = {} if ($(this).is(':checked')) { $(".userNumber1").css('background-color', "#a7ddff"); myData.checked=true; myData.backgroundColor = "#a7ddff"; } else { $(".userNumber1").css('background-color', "#ffffff"); myData.checked=false; myData.backgroundColor = "#ffffff"; } localstorage.setItem('myData',JSON.stringify(myData)) }) })