javascript - 在本地存储上保存背景颜色

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

因为您要使用Template literals (Template strings)创建一个字符串

第二:

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