Tengo un botón que cambia el color de fondo y el color del título.
button id="change" onclick="change()">Change background!</button> var state = true; function change(){ if (state){ document.body.style.backgroundColor = "red"; document.getElementById('title').style.color='blue'; } else { document.body.style.backgroundColor = "#005fff"; document.getElementById('title').style.color='lightgreen'; } state = !state; }Uso el estado para elegir entre una y la segunda opción, si tiene mejores soluciones, por favor dígame.
Quiero guardar la configuración en el almacenamiento local (después de actualizar y salir, quiero mantener el fondo que se eligió).
Tienes que actualizar localStorage con tu propia clave definida, elige bgcolor para eso en el ejemplo.
Además, cuando se carga el script, debe aplicar bgcolor en el cuerpo del documento, asignando el valor que obtiene del localStorage.
Si no se encontró ningún valor, configuro el fondo en blanco. esto es opcional por supuesto :)
var state = true; document.body.style.backgroundColor = localStorage.getItem('bgcolor') || 'white'; function change(){ if (state){ document.body.style.backgroundColor = "red"; document.getElementById('title').style.color='blue'; localStorage.setItem('bgcolor', 'red'); } else { document.body.style.backgroundColor = "#005fff"; document.getElementById('title').style.color='lightgreen'; localStorage.setItem('bgcolor', '#005fff'); } state = !state; } <h1 id="title">Title</h1> <button id="change" onclick="change()">Change background!</button>Puede almacenar el color actual en el almacenamiento local de esta manera:
function change(){ const colorOption = localStorage.getItem('colorOption'); if (colorOption === "2"){ document.body.style.backgroundColor = "red"; document.getElementById('title').style.color='blue'; localStorage.setItem('colorOption', '1'); } else { document.body.style.backgroundColor = "#005fff"; document.getElementById('title').style.color='lightgreen'; localStorage.setItem('colorOption', '2'); } }