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

Question

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

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

这是改变颜色 onclick 的 function：

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，并相应地更新 colors（旧 id 变为白色，新 id 变为黄色）