即使在页面刷新时也保持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 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';

    }

}

任何帮助是值得赞赏的。

Answer 1

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

Answer 2

正如@Djave所说，这里缺少的点是在您确实将所需项目保存到本地存储之后，您应该在页面加载时将其加载回去。因此，为了在 中设置一个值，只需执行以下操作，每当触发单击事件时，您都应该将值保存到本地存储中，如下所示：localstoragefunction selected(item) {&nbsp; this.clear();&nbsp; item.style.backgroundColor = 'yellow';&nbsp; window.localStorage.setItem('backgroundColor', 'yellow');}然后，对于事件，您可以在加载窗口时加载它，就像这样：onloadwindow.onload = function() {&nbsp; if (window.localStorage.getItem('backgroundColor')) {&nbsp; &nbsp; document.querySelector('.list').style.backgroundColor = window.localStorage.getItem('backgroundColor')&nbsp; }}

Answer 3

您必须在本地存储中设置 Item，并在页面加载时使用 localStorage.getItem（） 检查同一项。以下是执行此操作的方法，请检查代码片段：<style>#sideNavBox {display:none}#contentBox {margin-left:0px}#nav {&nbsp; display: flex;&nbsp; flex-wrap: wrap;&nbsp; flex: 1 1 0px}.link {&nbsp; max-width: 150px;&nbsp; padding: 3px;&nbsp; margin: 10px;&nbsp; border: 2px solid lime;&nbsp; border-radius: 15px;&nbsp; flex-basis: 100%;&nbsp; text-align: center;&nbsp; cursor: pointer;}.active {&nbsp; background-color: lime}.dd13:hover { cursor: pointer; }.dd13 {color: #FFFFFF;Font: 12px Arialbackground-color:: #48A040;Padding: 3px 3px 3px 3px;}#pageStatusBar{&nbsp; &nbsp; display:none!important;}</style><script>window.addEventListener("load", function() {&nbsp; document.getElementById("nav").addEventListener("click", function(e) {&nbsp; &nbsp; if (e.target.classList.contains("link")) {&nbsp; &nbsp;//&nbsp; &nbsp;location = e.target.getAttribute("data-link"); // or openLink(e.target.getAttribute("data-link"))&nbsp; &nbsp; }&nbsp; })})var divItems = document.getElementsByClassName("link");function selected(item) {&nbsp; &nbsp;// this.clear();&nbsp; &nbsp; if( item.style.backgroundColor == 'yellow')&nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; //means the item is selected already. So unset it.&nbsp; &nbsp; &nbsp; &nbsp; item.style.backgroundColor = 'white';&nbsp; &nbsp; &nbsp; &nbsp; localStorage.removeItem(item.id);&nbsp; &nbsp; }&nbsp; &nbsp; else&nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; item.style.backgroundColor = 'yellow';&nbsp; &nbsp; &nbsp; &nbsp; console.log(item.id);&nbsp; &nbsp; &nbsp; &nbsp; localStorage.setItem(item.id, 'any value');&nbsp; &nbsp; }&nbsp; &nbsp; //localStorage.setItem("tempcolorvalue", "yellow");}function clear() {&nbsp; &nbsp; for(var i=0; i < divItems.length; i++) {&nbsp; &nbsp; &nbsp; &nbsp; var item = divItems[i];&nbsp; &nbsp; &nbsp; &nbsp; item.style.backgroundColor = 'white';&nbsp; &nbsp; }}</script><h2>&nbsp;&nbsp; &nbsp;<b>Seminare nach Standort filtern</b></h2><div id="nav">&nbsp; &nbsp;<div class="link" id="firstlink" onclick="selected(this)" data-link="/internalseminars/SitePages/InternalSeminars.aspx?locations=Ulm" style="background-color: white;">Ulm</div>&nbsp; &nbsp;<div class="link" id="secondlink" onclick="selected(this)" data-link="/internalseminars/SitePages/InternalSeminars.aspx?locations=Taufkirchen" style="background-color: white;">Taufkirchen<br/></div>&nbsp; &nbsp;<div class="link" id="thirdlink"&nbsp; onclick="selected(this)"&nbsp; data-link="/internalseminars/SitePages/InternalSeminars.aspx?locations=Oberkochen" style="background-color: white;">Oberkochen</div>&nbsp; &nbsp;<div class="link" data-link="/internalseminars/SitePages/InternalSeminars.aspx?locations=Köln" style="background-color: white;">Köln</div>&nbsp; &nbsp;<div class="link" data-link="/internalseminars/SitePages/InternalSeminars.aspx?locations=Friedrichshafen" style="background-color: white;">Friedrichshafen</div>&nbsp; &nbsp;<div class="link" data-link="/internalseminars/SitePages/InternalSeminars.aspx?locations=Wetzlar" style="background-color: white;">Wetzlar</div>&nbsp; &nbsp;<div class="link" data-link="/internalseminars/SitePages/InternalSeminars.aspx?locations=Kiel" style="background-color: white;">Kiel<br/></div></div><div id="register">&nbsp;&nbsp; &nbsp;<p>To register yourself to a seminar please click on this icon&nbsp;&nbsp; &nbsp; &nbsp; <a title="Book for me" class="book-for-me-button"></a>. To register someone else to a seminar, please click on this icon&nbsp;&nbsp; &nbsp; &nbsp; <a title="Book for me" class="book-for-user-button"></a>.<br/></p>&nbsp;</div><script>&nbsp; &nbsp; if(localStorage.getItem("firstlink"))&nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; document.getElementById('firstlink').style.backgroundColor = "yellow";&nbsp; &nbsp; }&nbsp; &nbsp; if(localStorage.getItem("secondlink"))&nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; document.getElementById('secondlink').style.backgroundColor = "yellow";&nbsp; &nbsp; }&nbsp; &nbsp; if(localStorage.getItem("thirdlink"))&nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; document.getElementById('thirdlink').style.backgroundColor = "yellow";&nbsp; &nbsp; }</script>