localStorage not working to save a dynamic CSS backgroundColor-CodePudding

I'm trying to persist an array item that refers to a button color on my HTML but it's not working.

My HTML:

<div >
          <button></button>
          <button></button>
          <button></button>
          <button></button>
          <button></button>
          <button></button>
          <button></button>
</div>

JS:

let buttons = document.querySelectorAll("button");

let i = 0;

for (const button of buttons) {
  button.style.backgroundColor = "white";
  button.addEventListener("click", () => {
    let colors = ["red", "yellow", "green"];
    localStorage.setItem("currentColor", colors[i   % colors.length]);
    button.style.backgroundColor = localStorage.getItem("currentColor");
    i  ;
  });
}

CodePudding user response：

You are always doing localStorage.setItem() in your function, which overwrites whatever value was saved. Instead, you should first check if the value is already in localStorage, and if so retrieve it.

Secondly, just saving the color won't work alone. You will need to save the index of the color if you want to be able to "resume" the cycle of colors. Alternatively, save the color and then locate its index when restoring it from localStorage.

Here's a working solution:

const buttons = document.querySelectorAll("button");
let i = 0;

for (const button of buttons) {
  button.style.backgroundColor = "white";

  button.addEventListener("click", () => {
    let colors = ["red", "yellow", "green"];

    const saved = localStorage.getItem('colorIndex');
    if (saved !== null)
        i = parseInt(saved);
    
    button.style.backgroundColor = colors[i];

    if (  i == colors.length)
        i = 0;

    localStorage.setItem('colorIndex', i);
  });
}

Note that this will restore the previous color only after you click on a button, if you want to restore it immediately just move the colors and the localstorage.getItem() outside the click listener.

CodePudding user response：

Everytime the for loop loops, it will overwrite the previous data in localStorage, so everytime you will only have 1 color in localStorage.

A much simpler solution is to store it in an array and let localStorage store the array which is much easier especially when you have data need to be updated.

let buttons = document.querySelectorAll("button");

let i = 0;
let storecolor = []
for (const button of buttons) {
  button.style.backgroundColor = "white";
  button.addEventListener("click", () => {
    let colors = ["red", "yellow", "green"];
    storecolor.push(colors[i   % colors.length])
    localStorage.setItem("currentColor", JSON.stringify(storecolor));
    button.style.backgroundColor = JSON.parse(localStorage.getItem("currentColor"));
    i  ;
  });
}

<div >
          <button></button>
          <button></button>
          <button></button>
          <button></button>
          <button></button>
          <button></button>
          <button></button>
</div>