在页面刷新时保持div onclick事件中的背景颜色？

Question

我在onclick后将一个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

您必须在 localstorage 中设置 Item 并在页面加载时使用 localStorage.getItem() 检查相同的项目。

这里是你如何做到这一点，检查代码sn-p：

<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();

    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');

    }






    //localStorage.setItem("tempcolorvalue", "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" 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" 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>


<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";
    }
</script>

Answer 2

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

Answer 3

正如@Djave 所说这里缺少的一点是在您将所需的项目保存到localstorage 之后，您应该在页面加载时将其加载回来。

所以为了在localstorage 中设置一个值，您可以简单地执行以下操作，每当点击事件被触发时，您应该像这样将值保存到您的 localStorage：

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

然后使用onload 事件，您可以在窗口加载时加载它，就像这样：

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