使用 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 變為黃色）