сохранение цвета фона на локальном хранилище

Question

Я получил данные, хранящиеся на моем localStorage, и отображаю их в виде таблицы, в каждой строке есть кнопка. Теперь я хочу, чтобы при нажатии кнопки я хотел, чтобы она изменила цвет фона на другой, а при обновлении страницы кнопка сохраняет свое цветовое состояние.

Вот мой код

// here i will be the data in form of table
// my algorithm comes here
// this function will get data from the localstorage
const get_todos = ()=>{
  let todos = new Array();
  let todos_str = localStorage.getItem("todo");
  if(todos_str !== null){
    todos = JSON.parse(todos_str);
  }
  return todos;
}
//this function will show the data in the localstorage in table format
const show = ()=>{
  let todos = get_todos();
  let text = "";
  for(let i = 0; i < todos.length; i++){
      let allData = todos[i];
      let eventName = allData.Eventname;
      let location = allData.Location;
      let date = allData.Date;
      text += "<tr>";
      text += "<td>" + eventName + "</td>";
      text += "<td>" + location + "</td>";
      text += "<td>" + date + "</td>";
      text += "<td>" + "<button class='buttons' type='button'>Pending</button>" + "</td>";
      text += "<td>" + "<i id='remove' class='fas fa-trash-alt btndelete'></i>" + "</td></tr>";

  }
  //the data gotten from the localstorage will be here
  let table = document.querySelector("#table > tbody");
  table.innerHTML = text;
  //this is where the button background color will change
window.addEventListener("load", ()=>{
    let thead = document.querySelector("#thead");
    let buttons = Array.from(document.querySelectorAll(".buttons"));
    thead.addEventListener("click", (e)=>{
      if(e.target.className === "buttons"){
        let index = buttons.indexOf(e.target);
        changeBackground(e, index);
      }
    });
    buttons.forEach(btn, index =>{
      btn.className = sessionStorage.getItem('background${index}') || 'buttons';
      
    });
  });
  const changeBackground = (e, index)=>{
    e.target.className += "change";
    sessionStorage.setItem(background${index}, e.target.className);

  }
  
}
window.addEventListener("DOMContentLoaded", ()=>{
  show();
});

Answer 1

В вашем коде есть несколько ошибок:

Первый :

btn.className = sessionStorage.getItem('background${index}') || 'buttons';

Должно быть:

btn.className = sessionStorage.getItem(`background${index}`) || 'buttons';

, потому что вы создаете строка, использующая Шаблонные литералы (Шаблонные строки)

Секунда :

e.target.className += "change";

Должно быть:

e.target.className += " change";

Вы должны добавить пробел при объединении строк, иначе в вашем случае это не обеспечит нужного поведения, поскольку ваш код добавит change имя класса к предыдущему классу как одно слово.

Третий :

sessionStorage.setItem(background${index}, e.target.className);

Должно быть:

sessionStorage.setItem(`background${index}`, e.target.className);

В вашем вопросе вы говорите о localStorage , но вы используете sessionStorage, Все еще не уверен, что это то, что вы хотите, поэтому, если вы хотите, чтобы это было localStorage , просто замените sessionStorage на localStorage

// here i will be the data in form of table
// my algorithm comes here
// this function will get data from the localstorage
const get_todos = ()=>{
  let todos = new Array();
  let todos_str = localStorage.getItem("todo");
  if(todos_str !== null){
    todos = JSON.parse(todos_str);
  }
  return todos;
}
//this function will show the data in the localstorage in table format
const show = ()=>{
  let todos = get_todos();
  let text = "";
  for(let i = 0; i < todos.length; i++){
      let allData = todos[i];
      let eventName = allData.Eventname;
      let location = allData.Location;
      let date = allData.Date;
      text += "<tr>";
      text += "<td>" + eventName + "</td>";
      text += "<td>" + location + "</td>";
      text += "<td>" + date + "</td>";
      text += "<td>" + "<button class='buttons' type='button'>Pending</button>" + "</td>";
      text += "<td>" + "<i id='remove' class='fas fa-trash-alt btndelete'></i>" + "</td></tr>";

  }
  //the data gotten from the localstorage will be here
  let table = document.querySelector("#table > tbody");
  table.innerHTML = text;
  //this is where the button background color will change
window.addEventListener("load", ()=>{
    let thead = document.querySelector("#thead");
    let buttons = Array.from(document.querySelectorAll(".buttons"));
    thead.addEventListener("click", (e)=>{
      if(e.target.className === "buttons"){
        let index = buttons.indexOf(e.target);
        changeBackground(e, index);
      }
    });
    buttons.forEach(btn, index =>{
      btn.className = localStorage.getItem(`background${index}`) || 'buttons';

    });
  });
  const changeBackground = (e, index)=>{
    e.target.className += " change";
    localStorage.setItem(`background${index}`, e.target.className);
  }

}
window.addEventListener("DOMContentLoaded", ()=>{
  show();
});