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

Question

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

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

这是更改onclick颜色的功能：

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变为黄色）