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

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 Arialbackground-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';    }}任何帮助是值得赞赏的。

Answer 1

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

Answer 2

正如@Djave所说，这里缺少的点是在您确实将所需项目保存到本地存储之后，您应该在页面加载时将其加载回去。

因此，为了在 中设置一个值，只需执行以下操作，每当触发单击事件时，您都应该将值保存到本地存储中，如下所示：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')

  }

}

Answer 3

您必须在本地存储中设置 Item，并在页面加载时使用 localStorage.getItem（） 检查同一项。

以下是执行此操作的方法，请检查代码片段：

<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>