Mi motivo es que cuando un usuario haga clic en el botón, el color de fondo y el color del texto del botón cambiarán de forma permanente. Cuando hago clic en el botón, los colores se agregan perfectamente, pero no de forma permanente. Cuando vuelvo a cargar la página del navegador, el color también desaparece. ¿Cómo puedo arreglarlo?
índice.html:
<body> <button class="clickFirst" onclick="click1()">click1</button> <input type="color" id="colorID" oninput="changeColor()"> </body>estilo.css:
<style> .style1{ background-color: green; color: white; } .style2{ background-color: blue; color: white; } </style>índice.js:
function click1(){ localStorage.setItem("class1","style1"); green = localStorage.getItem("class1"); var b1 = document.querySelector(".clickFirst"); b1.classList.add(green); }Debe obtener el valor de color de localStorage y configurarlo en su elemento (botón) al comienzo de su programa
Estás cerca. Cambie su código javascript para aplicar el color cuando se carga la página
He modificado un poco tu código js para reflejar eso
el código no funcionará aquí porque stackoverflow no permite el acceso a localStorage como un sandbox
function applyColors() { green = localStorage.getItem("class1"); var b1 = document.querySelector(".clickFirst"); b1.classList.add(green); } function storeColor() { localStorage.setItem("class1", "style1"); applyColors(); } (function () { applyColors(); })(); .style1{ background-color: green; color: white; } .style2{ background-color: blue; color: white; } <button class="clickFirst" onclick="click1()">click1</button> <input type="color" id="colorID" oninput="changeColor()">