3 回答

TA貢獻1852條經驗 獲得超7個贊
正如@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')
}
}

TA貢獻1777條經驗 獲得超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>
添加回答
舉報