Sé que hay muchas preguntas similares. Las probé pero realmente no puedo incorporarlas a mi proyecto.
Estoy tratando de guardar en localStorage el nuevo background-color seleccionado con el colorpicker de color nativo.
Estoy casi allí, pero no puedo entender cómo hacer que funcione.
Por favor, vea mi código hasta ahora:
function changeBgColor(color) { if (color) window.localStorage.setItem('bgColor', color); else if (!(color = window.localStorage.getItem('bgColor'))) return; document.getElementById('colorpicker').addEventListener('input', function() { var elements = document.getElementsByClassName("card-bg") for (var i = 0; i < elements.length; i++) { elements[i].style.background = this.value; } }) } window.addEventListener('DOMContentLoaded', () => changeBgColor()); .card1 { width: 200px; height: 200px; background-color: #222; margin: 10px 0 0 0; } <div class="card1 card-bg">Set A</div> <div class="card1 card-bg">Set A</div> <div class="card1 card-bg">Set A</div> <br> <input type="color" id="colorpicker" onselect="changeBgColor();">Las características importantes para mí son:
class ya que tengo varios divs a los que quiero apuntar con la misma entradalocalStorage Eso es todo realmente. Solo necesito averiguar la parte donde el valor se guarda en localStorage .
Después de hacer que esto funcione, tendré que replicarlo para un conjunto diferente de divs.
Gracias de antemano por cualquier ayuda.
Si el cheque tuviera = asignación en lugar de == comparación
Aquí hay un fragmento refactorizado que funciona:
let pretend_local_storage = null function setupBackgroundColorChange() { const elements = document.querySelectorAll(".card-bg") document.getElementById('colorpicker').addEventListener('input', function(e) { color = e.target.value if (color === pretend_local_storage) return pretend_local_storage = color elements.forEach((element) => element.style.background = color) }) } window.onDOMContentLoaded = setupBackgroundColorChange(); .card1 { width: 200px; height: 200px; background-color: #222; margin: 10px 0 0 0; } <div class="card1 card-bg">Set A</div> <div class="card1 card-bg">Set A</div> <div class="card1 card-bg">Set A</div> <br> <input type="color" id="colorpicker" onselect="changeBgColor();">Ejemplo de almacenamiento local:
localStorage.getItem('bgColor', null) function setupBackgroundColorChange() { const elements = document.querySelectorAll(".card-bg") setColor(elements, localStorage.getItem('bgColor', '#000')) document.getElementById('colorpicker').addEventListener('input', function (e) { color = e.target.value if (color === localStorage.getItem('bgColor')) return localStorage.setItem('bgColor', color) setColor(elements, color) }) } function setColor(elements, color) { elements.forEach((element) => element.style.background = color) } window.onDOMContentLoaded = setupBackgroundColorChange();En primer lugar, usaría el activador de cambio. Para ser honesto, no necesita ninguna condición dentro de la función. puede establecer el color en localStorage y eso es todo.
/* this lines check if already set color to localStorage */ if (window.localStorage.getItem('bgColor')) { var elements = document.getElementsByClassName("card-bg") for (var i = 0; i < elements.length; i++) { elements[i].style.background = this.value; } } function changeBgColor() { let color = document.getElementById('colorpicker').value; const bg_curr = localStorage.getItem('bgColor'); console.log(color, bg_curr); localStorage.setItem('bgColor', color); document.getElementById('colorpicker').addEventListener('input', function() { var elements = document.getElementsByClassName("card-bg") for (var i = 0; i < elements.length; i++) { elements[i].style.background = color; } }) } window.addEventListener('DOMContentLoaded', () => changeBgColor()); .card1 { width: 200px; height: 200px; background-color: #222; margin: 10px 0 0 0; } <input type="color" id="colorpicker" onchange="changeBgColor();"> <div class="card1 card-bg">Set A</div> <div class="card1 card-bg">Set A</div> <div class="card1 card-bg">Set A</div> <br>