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>