Acabo de pasar toda una tarde en mi problema, soy nuevo en JavaScript y quiero hacer algo:
Quiero que el usuario pueda seleccionar y cambiar el color principal en la página.
Agregué un selector de color en mi HTML con:
<input type="color" id="colorID" oninput="changeColor()">Luego tomé este código en Internet:
// on input, get value and save it as 'storedValue' function changeColor() { var userColor = document.getElementById('colorID').value; localStorage.setItem('storedValue', document.body.style.backgroundColor = userColor); } // if there is a value stored, update color picker and background color if(localStorage.storedValue) { document.getElementById('colorID').value = localStorage.storedValue; document.body.style.backgroundColor = localStorage.storedValue; }Quiero reemplazar "document.body.style.backgroundColor" por mi --main-color: #fff; de mi :raíz. Intenté muchas cosas, reemplazando document.body por document.documentElement... ¡Nada quiere funcionar!
Sí, porque la escritura/lectura en el almacenamiento local/de sesión debe realizarse con métodos stringify/parse:
// in your HTML file, add a hidden input <input type="hidden" value="your_css_variable_value" id="myId"/> // in JS file, query that element and get its value const bgColor = document.querySelector('#myId').value; // on input, get value and save it as 'storedValue' function changeColor() { var userColor = document.getElementById('colorID').value; document.body.style.backgroundColor = userColor; localStorage.setItem('storedValue', JSON.stringify(userColor)); } // if there is a value stored, update color picker and background color if (localStorage.getItem('storedValue')) { const savedColor = JSON.parse(localStorage.getItem('storedValue')); document.getElementById('colorID').value = savedColor; document.body.style.backgroundColor = savedColor; }Esta no es la forma correcta de obtener el valor del almacenamiento local:
function changeColor() { var userColor = document.getElementById('colorID').value; localStorage.setItem('storedValue', document.body.style.backgroundColor = userColor); } if(localStorage.storedValue) { document.getElementById('colorID').value = localStorage.storedValue; document.body.style.backgroundColor = localStorage.storedValue; }La forma correcta de obtener el valor almacenado del almacenamiento local es:
function changeColor() { var userColor = document.getElementById('colorID').value; document.body.style.backgroundColor=userColor; localStorage.setItem('storedValue', userColor); } if(localStorage.getItem("storedValue")) { let storedValue=localStorage.getItem("storedValue"); document.getElementById('colorID').value = storedValue; document.body.style.backgroundColor = storedValue; }Estoy actualizando esta publicación, gracias a todos los que respondieron.
Mi primera pregunta mostró un ejemplo y perdí a algunas personas. Esto es lo que realmente quiero hacer:
// on input, get value and save it as 'storedValue' function changeColor() { var userColor = document.getElementById('colorID').value; localStorage.setItem('storedValue', document.querySelector(':root').style.setProperty('--main-color', userColor)); } // if there is a value stored, update color picker and background color if(localStorage.storedValue) { document.getElementById('colorID').value = localStorage.storedValue; document.querySelector(':root').style.setProperty('--main-color', userColor) = localStorage.storedValue; }Mi único problema ahora es: no se guarda cuando actualizo la página. Estoy tan cerca ! ¿Qué debo cambiar para que este código funcione?