He intentado guardar la selección del usuario en el almacenamiento local, pero el código no funciona. Quiero que guarde el color que el usuario selecciona en el almacenamiento local para que, si el usuario cambia o actualiza la página, el color de fondo permanezca allí.
function change(list) { var val=list.options[list.selectedIndex].value; document.body.style.background=val; } $(function () { $('#changer').change(function () { localStorage.setItem('todoData', this.value); }); if (localStorage.getItem('todoData')) { $('#changer') .val(localStorage.getItem('todoData')) .trigger('change'); } }); #pageFooter{ background-color: #F49080; color: white; text-align: right; position: relative; margin-top: -50px; clear: both; } label{ font-size: 14px; font-family: sans-serif; color: white; } <footer id="pageFooter"> <label>Select Color</label> <select id="changer" onchange="change(this)"> <option value="" selected disabled hidden> - - Select Color - -</option> <option value="Black">Black</option> <option value="#D48166">Orange</option> <option value="DarkGreen">Dark Green</option> <option value="#D6A3FB">Pink</option> <option value="#003b49">Original</option> </select> </footer>Yo lo cambie. El orden sería. Al cargar la página, debe verificar si algún valor ya está configurado en el almacenamiento local. Si es así, establecerá el color para el cuerpo.
Luego, si se activa el detector de eventos de cambio, cambiará el color y almacenará el valor en el almacenamiento local.
Sin jQuery ejemplo de trabajo:
if( localStorage.getItem('todoData') ) { alert(localStorage.getItem('todoData')) document.body.style.background = localStorage.getItem('todoData'); } function change(list) { var val = list.options[list.selectedIndex].value; document.body.style.background = val; localStorage.setItem('todoData', this.value); }Actualice su código que se muestra a continuación:
function change(list){ var val=list.options[list.selectedIndex].value; document.body.style.background=val; }Y cambiarlo a:
function change(list) { var val=list.options[list.selectedIndex].value; var pageFooter = document.getElementById( "pageFooter"); pageFooter .style.backgroundColor = val; }