Keep Background Color for multiple elements when the browser is refershed in javascript?

Question

I am trying to keep the background color for different elements same when the browser is refreshed This is a note-taking website project and a person can add as many notes as they want so i want to save their selected color which can be different for each element (note) and then the color would remain same when the browser is refreshed.

Here is the code of "How elements display"

function showNote2() {
    console.log("Show");
    let note = localStorage.getItem("notes");
    if(note == null){
        noteData = []
        // message.innerText = "Please Add a Note"
    }
    else{
        noteData = JSON.parse(note);
    };
    let showBox = "";
    noteData.forEach(function show(element, index) {
        showBox += `<div class="noteCard my-2 mx-2 card" id="cardID" style="width: 18rem;">
        <select id="mySelect${index}" class="clr-btn" style="text-align:center" onchange="changeColor(${index})">
        <option id="bckgrnd-clr" value="white">Background Color</option>
        <option  value="Red">Red</option>
        <option value="Green">Green</option>
        <option  value="Blue">Blue</option>
        </select>
                <div class="card-body" id="card${index}">
                  <h5 class="cardtitle">Note
                  ${index + 1}
                  </h5>
                  <p class="card-text"> 
                  ${element}
                  </p>
                  <button id="${index}" onclick="deleteNote(this.id)" class="btn btn-primary">Delete Note</a>
                </div>
              </div>  
            })

      let showNote3 = document.getElementById("notes2");
      if(noteData.length != 0){
          showNote3.innerHTML = showBox;
      }else{
          showNote3.innerHTML = "Please add a Note"
      }   
}`

Here is the function which is used to apply color:

function changeColor(index,e) {
    console.log("Change",e)
    let note = localStorage.getItem("notes");
    if(note != null ){
        let showNote3 = document.getElementById(`card4${index}`)
        console.log(showNote3)
        let colorApply = document.getElementById(`card${index}`)
        console.log(colorApply)
        let elm1 = document.getElementById(`mySelect${index}`)
        console.log(elm1)
        let color = elm1.options[elm1.selectedIndex].value;
        colorApply.style.backgroundColor = color;
        localStorage.setItem(`clr${index}`, color)
    }
    else{
        `Note is Empty`
    }

and here is the code which i used to store and call the selected value. It worked fine when it comes to storing the value but it doesn't work when returned.

function backGroundClr(index) {
        let backclr2 = localStorage.getItem(`clr${index}`)
        colorApply.style.backgroundColor = backclr2   
        console.log(backGroundClr)    
}

Thanks

Answer 1

In your loop, load your color before generating your template. Then use it in the template

  noteData.forEach(function show(element, index) {

color = localStorage.getItem(`clr${index}`) || 'white'


showBox += `
       
<div class="card-body" id="card${index}" style="background-color:${color}">