即使在刷新页面时也保持div onclick背景色？

Question

在单击后，我将div的背景颜色更改为黄色，但是由于页面刷新，所以颜色更改消失了。

这是我使用的代码：

function selected(item) {
    this.clear();
    item.style.backgroundColor = 'yellow';
}

function clear() {
    for(var i=0; i < divItems.length; i++) {
        var item = divItems[i];
        item.style.backgroundColor = 'white';
    }
}   

</script> 
<h2>
   <b>Seminare nach Standort filtern</b></h2> 
<div id="nav"> 
   <div class="link" onclick="selected(this)" data-link="/internalseminars/SitePages/InternalSeminars.aspx?locations=Ulm" style="background-color: white;">Ulm</div> 
</div> 

我尝试使用localStorage，但是我不知道如何在这里应用它。也许像localStorage.setItem("item.style.backgroundColor", 'yellow');之类的东西，但仅此一项是不会做的

这是完整的代码：

<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"); // or openLink(e.target.getAttribute("data-link"))
    }
  })
})

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

function selected(item) {
    this.clear();
    item.style.backgroundColor = 'yellow';
}

function clear() {
    for(var i=0; i < divItems.length; i++) {
        var item = divItems[i];
        item.style.backgroundColor = 'white';
    }
}


</script>
<h2> 
   <b>Seminare nach Standort filtern</b></h2>
<div id="nav">
   <div class="link" onclick="selected(this)" data-link="/internalseminars/SitePages/InternalSeminars.aspx?locations=Ulm" style="background-color: white;">Ulm</div>
   <div class="link" data-link="/internalseminars/SitePages/InternalSeminars.aspx?locations=Taufkirchen" style="background-color: white;">Taufkirchen<br/></div>
   <div class="link" data-link="/internalseminars/SitePages/InternalSeminars.aspx?locations=Oberkochen" style="background-color: white;">Oberkochen</div>
   <div class="link" data-link="/internalseminars/SitePages/InternalSeminars.aspx?locations=Köln" style="background-color: white;">Köln</div>
   <div class="link" data-link="/internalseminars/SitePages/InternalSeminars.aspx?locations=Friedrichshafen" style="background-color: white;">Friedrichshafen</div>
   <div class="link" data-link="/internalseminars/SitePages/InternalSeminars.aspx?locations=Wetzlar" style="background-color: white;">Wetzlar</div>
   <div class="link" 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>

感谢您的任何帮助。

Answer 1

不幸的是，这是页面刷新时应该执行的操作。该页面已清除。您将需要将数据持久保存到数据库中以保存信息。这就是您想要的例子吗？

Answer 2

为了在localstorage中设置值，您可以简单地这样做：

function selected(item) {
    this.clear();
    item.style.backgroundColor = 'yellow';
    window.localStorage.setItem('backgroundColor', 'yellow');
}

但是正如@Djave所说的，您应该在页面加载时加载它，因此您可以简单地这样做：

window.onload = function() {
   if(window.localStorage.getItem('backgroundColor')) {
      document.querySelector('.list').style.backgroundColor = window.localStorage.getItem('backgroundColor')
   }
}