save colour selector with local storage-CodePudding

so im trying to save colour selector to local storage so it will save the users selection after refreshing the page

this is a snippet of my code so far, if i remove the localstorage code from the script it will change colours but wont save the selection.

document.addEventListener('click', (e) => {
    const colorOption = e.target.closest('.color-option');
    if (!colorOption) return;
    
    // unselect currently selected color options
    document.querySelectorAll('.color-option').forEach(colorOption => colorOption.classList.remove('is-selected'));
    colorOption.classList.add('is-selected');
    
    const color = colorOption.dataset.color;
    
    let root = document.documentElement;
    root.style.setProperty('--primary-color', color);

    localStorage.setItem(".color-option", "--primary-color");
    localStorage.getItem("--primary-color");
    
  });

body {
  background-color: var(--primary-color);
}

.color-option {
  height:35px;
  width: 35px;
  list-style: none;
  border-radius: 4px;
  margin: 7px;
  transition: .2s;
  cursor: pointer;
  &:hover {
    box-shadow: 0 0 0 5px rgba(0,0,0,.2);
  }
  &.is-selected {
    transform: scale(1.1);
    box-shadow: 0 0 0 5px rgba(0,0,0,.2);
  }
}

.color-option:nth-child(1) { background: #3485fd }
.color-option:nth-child(2) { background: #002C5F }
.color-option:nth-child(3) { background: #00AFD8 }
.color-option:nth-child(4) { background: #5B1F69 }
.color-option:nth-child(5) { background: #FF5F1F }
.color-option:nth-child(6) { background: #ff00e2 }

<body>
<ul >
    <li  data-color="#3485fd"></li>
    <li  data-color="#002C5F"></li>
    <li  data-color="#00AFD8"></li>
    <li  data-color="#5B1F69"></li>
    <li  data-color="#FF5F1F"></li>
    <li  data-color="#ff00e2"></li>
    
</ul>
</body>

can't quite figure out what im doing wrong hopefully someone can help

CodePudding user response：

please check below

localStorage.setItem('bgcolor', 'red');
localStorage.getItem('bgcolor');

now look at your code, you have used .color-option as keyName,

but used another keyName in getItem --primary-color which is wrong.

localStorage.setItem(".color-option", "--primary-color");
localStorage.getItem("--primary-color");

it should be

localStorage.setItem(".color-option", "--primary-color-value");
localStorage.getItem(".color-option");

CodePudding user response：

I don't think I get what you want really! but if you want to store the selected color in local storage and bring it back on every load you can save the actual value of the color and on every load, you will set the root property of the (--primary-color) to the value you stored. Like this

In your js file

let root = document.documentElement;

document.addEventListener("click", (e) => {

  const colorOption = e.target.closest(".color-option");

  if (!colorOption) return;

  // unselect currently selected color options
  document
    .querySelectorAll(".color-option")
    .forEach((colorOption) => colorOption.classList.remove("is-selected"));
  colorOption.classList.add("is-selected");

  const color = colorOption.dataset.color;

  root.style.setProperty("--primary-color", color);

  localStorage.setItem("selected-color", color);
});

window.onload = () => {
  root.style.setProperty(
    "--primary-color",
    localStorage.getItem("selected-color")
  );
};

I hope that solves what you want. thanks