使用 localStorage 一次更改一个 div 的背景颜色

Question

点击按钮后，我使用 localStorage 将 div 的背景颜色更改为黄色。如果用户单击另一个按钮，旧按钮仍然具有黄色背景色。如果我再次点击它，它只会变成白色。

我想要实现的是只有被点击的按钮应该有黄色背景色，但我正在努力使用 localStorage 来实现它。

这是改变点击颜色的函数：

function selected(item) {

    if(item.style.backgroundColor == 'yellow'){
        // means the item is selected already. So unset it.
        item.style.backgroundColor = 'white';
        localStorage.removeItem(item.id);
    }
    else{
        item.style.backgroundColor = 'yellow';

        console.log(item.id);
        localStorage.setItem(item.id, 'any value');
    }
}

这是 div 的样子：

<div class="link" id="firstlink" onclick="selected(this)" data-link="/internalseminars/SitePages/InternalSeminars.aspx?locations=Ulm" style="background-color: white;">Ulm</div> 

这是完整的代码：

<style>

#sideNavBox {display:none}
#contentBox {margin-left:0px}
#nav {
  display: flex;
  flex-wrap: wrap;
  flex: 1 1 0px
}

.link {
  max-width: 150px;
  padding: 3px;
  margin: 10px;
  border: 2px solid lime;
  border-radius: 15px;
  flex-basis: 100%;
  text-align: center;
  cursor: pointer;
}

.active {
  background-color: lime
}

.dd13:hover { cursor: pointer; }

.dd13 {
color: #FFFFFF;
Font: 12px Arial
background-color:: #48A040;
Padding: 3px 3px 3px 3px;
}


#pageStatusBar{
    display:none!important;
}


</style><script>
window.addEventListener("load", function() {
  document.getElementById("nav").addEventListener("click", function(e) {
    if (e.target.classList.contains("link")) {
       location = e.target.getAttribute("data-link");
    }
  })
})

var divItems = document.getElementsByClassName("link");




function selected(item) {

    if(item.style.backgroundColor == 'yellow'){
        // unset the item that is already selected
        item.style.backgroundColor = 'white';
        localStorage.removeItem(item.id);
    }
    else{
        item.style.backgroundColor = 'yellow';

        console.log(item.id);
        localStorage.setItem(item.id, 'any value');
    }

}


</script> 
<h2>
   <b>Seminare nach Standort filtern</b></h2> 
<div id="nav"> 
   <div class="link" id="firstlink" onclick="selected(this)" data-link="/internalseminars/SitePages/InternalSeminars.aspx?locations=Ulm" style="background-color: white;">Ulm</div> 
   <div class="link" id="secondlink" onclick="selected(this)" data-link="/internalseminars/SitePages/InternalSeminars.aspx?locations=Taufkirchen" style="background-color: white;">Taufkirchen<br/></div> 
   <div class="link" id="thirdlink" onclick="selected(this)" data-link="/internalseminars/SitePages/InternalSeminars.aspx?locations=Oberkochen" style="background-color: white;">Oberkochen</div> 
   <div class="link" id="fourthlink" onclick="selected(this)" data-link="/internalseminars/SitePages/InternalSeminars.aspx?locations=Köln" style="background-color: white;">Köln</div> 
   <div class="link" id="fifthlink" onclick="selected(this)" data-link="/internalseminars/SitePages/InternalSeminars.aspx?locations=Friedrichshafen" style="background-color: white;">Friedrichshafen</div> 
   <div class="link" id="sixthlink" onclick="selected(this)" data-link="/internalseminars/SitePages/InternalSeminars.aspx?locations=Wetzlar" style="background-color: white;">Wetzlar</div> 
   <div class="link" id="seventhlink" onclick="selected(this)" data-link="/internalseminars/SitePages/InternalSeminars.aspx?locations=Kiel" style="background-color: white;">Kiel<br/></div> 
</div> 
<div id="register">
   <p>To register yourself to a seminar please click on this icon 
      <a title="Book for me" class="book-for-me-button"></a>. To register someone else to a seminar, please click on this icon 
      <a title="Book for me" class="book-for-user-button"></a>.<br/></p>
</div> 
<script>
    if(localStorage.getItem("firstlink")){
        document.getElementById('firstlink').style.backgroundColor = "yellow";
    }
    if(localStorage.getItem("secondlink")){
        document.getElementById('secondlink').style.backgroundColor = "yellow";
    }
    if(localStorage.getItem("thirdlink")){
        document.getElementById('thirdlink').style.backgroundColor = "yellow";
    }
    if(localStorage.getItem("fourthlink")){
        document.getElementById('fourthlink').style.backgroundColor = "yellow";
    }
    if(localStorage.getItem("fifthlink")){
        document.getElementById('fifthlink').style.backgroundColor = "yellow";
    }
    if(localStorage.getItem("sixthlink")){
        document.getElementById('sixthlink').style.backgroundColor = "yellow";
    }
    if(localStorage.getItem("seventhlink")){
        document.getElementById('seventhlink').style.backgroundColor = "yellow";
    }
</script>

我想过做这样的事情：

function selected(item) {
    if(item.style.backgroundColor == 'yellow'){
        // unset the item that is already selected
        item.style.backgroundColor = 'white';
        localStorage.removeItem(item.id);
    } else if((document.getElementById("firstlink") has backgroundcolour ) || (document.getElementById("secondlink") has backgroundcolour)... ){
       // remove backgroundColor
    } else{
        item.style.backgroundColor = 'yellow';
        console.log(item.id);
        localStorage.setItem(item.id, 'any value');
    }
}

但这或多或少是伪代码，因为我不知道如何做到这一点。

感谢任何帮助！

Answer 1

在执行黄色/非黄色点击逻辑之前，您可以先将所有链接设为白色。

这是一个工作示例（使用 fakeLocalStorage，因为 SO 不允许 localStorage）：

// change all but the locally stored link to white
function allLinksToWhite() {
  let links = document.getElementsByClassName('link');
   for (let link of links) {
    if (link.id === fakeLocalStorage.getItem(link.id)) {
      continue;
    }
    link.style.backgroundColor = 'white';
  }
}

function selected(item) {

  allLinksToWhite();

  if (item.style.backgroundColor == 'yellow') {
    item.style.backgroundColor = 'white';
    fakeLocalStorage.removeItem(item.id);
  } else {
    item.style.backgroundColor = 'yellow';

    // console.log(item.id);
    fakeLocalStorage.setItem(item.id, 'any value');
  }
}

// a "fake" localStorage because SO blocks localStorage
const fakeLocalStorage = {
  _storage: {},
  getItem: (name) => fakeLocalStorage._storage[name],
  setItem: (name, value) => {
    fakeLocalStorage._storage[name] = value;
  },
  removeItem: (name) => {
    if (fakeLocalStorage._storage[name]) {
      delete fakeLocalStorage._storage[name];
    }
  }
}

.link {
  max-width: 150px;
  padding: 2px;
  margin: 4px;
  border: 2px solid lime;
  border-radius: 15px;
  flex-basis: 100%;
  text-align: center;
  cursor: pointer;
}

<div class="link" id="firstlink" onclick="selected(this)" style="background-color: white;">Ulm</div>
<div class="link" id="secondlink" onclick="selected(this)" data-link="/internalseminars/SitePages/InternalSeminars.aspx?locations=Taufkirchen" style="background-color: white;">Taufkirchen<br/></div>
<div class="link" id="thirdlink" onclick="selected(this)" data-link="/internalseminars/SitePages/InternalSeminars.aspx?locations=Oberkochen" style="background-color: white;">Oberkochen</div>
<div class="link" id="fourthlink" onclick="selected(this)" data-link="/internalseminars/SitePages/InternalSeminars.aspx?locations=Köln" style="background-color: white;">Köln</div>
<div class="link" id="fifthlink" onclick="selected(this)" data-link="/internalseminars/SitePages/InternalSeminars.aspx?locations=Friedrichshafen" style="background-color: white;">Friedrichshafen</div>
<div class="link" id="sixthlink" onclick="selected(this)" data-link="/internalseminars/SitePages/InternalSeminars.aspx?locations=Wetzlar" style="background-color: white;">Wetzlar</div>
<div class="link" id="seventhlink" onclick="selected(this)" data-link="/internalseminars/SitePages/InternalSeminars.aspx?locations=Kiel" style="background-color: white;">Kiel<br/></div>

Answer 2

您需要使用 localStorage 吗？如果你不这样做，你可以设置一个变量，比如说buttonThatIsCurrentlyYellow，它存储了当前黄色按钮的id。然后，当单击一个新按钮时，将存储在该变量中的 id 按钮更改为白色，并使新按钮变为黄色，从而相应地更新变量。

如果您需要使用 localStorage，而不是设置多个项目，您可以只设置一个，例如：

window.localStorage.setItem("yellowButton", "your-btn-id")

然后，默认情况下您总是将按钮设为白色，除了其中存储了 id 的按钮。每次单击时，您都会更新“yellowButton”以反映应该为黄色的新按钮的 id 并相应地更新颜色（旧 id 变为白色，新 id 变为黄色）