How to save new background color via `colorpicker` to `localStorage`?

Question

I know there's a lot of similar questions.. I've tried them but I really can't incorporate it to my project.

I'm trying to save to localStorage the new background-color selected using the native colorpicker.

I'm almost there but I just can't figure out how to make it work.

Please see my code so far:

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;
}

Set A
Set A
Set A

The important feature for me are:

To change background color using input="color"
Use class selector since I have multiple divs I want to target with the same input
Save the value to localStorage

That's all really. I just need to figure out the part where the value gets saved to localStorage.

After I make this work, I will need to replicate it for a different set of divs..

Thank you in advance for any help.

user_14190543 · Answer

If check had = assignment instead of == comparison

Here is a working refactored snippet:

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;
}

Set A
Set A
Set A

Local Storage example:

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();

user_14807111 · Answer

First of all i would use onchange trigger. To be honest, you dont need any condition inside the function. you can set the color to localStorage and that is it.

/* 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;
}


Set A
Set A
Set A

How to save new background color via `colorpicker` to `localStorage`?

2 Answers