¿Cómo almacenaría el color de un elemento, después de actualizar la página cuando el usuario haya seleccionado el color requerido? En esencia, el color debe permanecer en el mismo color que el usuario seleccionó antes de actualizar la página.
Puedo cambiar el color cuando se ha elegido un color.
HTML
<body onload="changeColor()">
<h1 id="Myelement">This is a heading</h1>
<input type="color" id="get_color" onchange="changeColor()">
Guion
<script>
function changeColor() {
let color_picker = document.getElementById('get_color').value;
localStorage.setItem("color", color_picker);
document.getElementById("Myelement").style.color = localStorage.getItem("color");
document.getElementById("Myelement").style.transition = "all 1s";
}
</script>
Su error parece estar en la línea <body onload="changeColor()"> que se llamará al cargar. Dentro changeColor() siempre obtendrá el $colorPickerElement.value que siempre es el mismo en la carga de la página, a menos que esté representando un valor diferente del HTML generado por el servidor, y parece que este no es el caso.
En su lugar, llame a otra función para obtener el valor guardado en la carga de la página y utilícelo si existe. Al cambiar el valor del selector, continúe usando la función existente.
HTML
<body onload="onLoad()">
<h1 id="Myelement">This is a heading</h1>
<input type="color" id="get_color" onchange="changeColor()" />
</body>
Guion
function onLoad() {
const color = localStorage.getItem('color');
if (color) {
document.getElementById('get_color').value = color;
document.getElementById('Myelement').style.color = color;
}
}
function changeColor() {
const color = document.getElementById('get_color').value;
localStorage.setItem('color', color);
document.getElementById('Myelement').style.color = color;
document.getElementById('Myelement').style.transition = 'all 1s';
}
Puede usar la API localStorage para almacenar información en el almacenamiento del navegador del usuario. Esto estará vinculado a su sitio web únicamente.
Necesitará específicamente localStorage.getItem() y localStorage.setItem() .
Recursos adicionales: