Solution 1 :

You have to set Item in localstorage and also check the same item with localStorage.getItem() when the page loads.

Here is how you can do this, check the code snippet:


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


Solution 2 :

Unfortunately, that is what the page is supposed to do on refresh. The page is cleared. You would need to persist the data to a database to hold the information. Is that what you want an example of?

Solution 3 :

as @Djave said the missing point here is after you did save your desired items into the localstorage, you should, load it back when the page gets load.

So In order to set a value in localstorage you can simply do as follows, whenever the click event got fired you should save the value to your localStorage like this:

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

Then with an onload event, you can load it whenever the window got loaded, just like this:

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

Problem :

I change the background color of a div to yellow after onclick, but since the page refreshes, the color change is gone.

enter image description here

This is the code I use:

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> 

I tried using localStorage, but I can’t figure out how to apply it here.
Maybe something like localStorage.setItem("item.style.backgroundColor", 'yellow');, but that alone won’t do

Here’s the full code:

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

Any help is appreciated.

Comments

Comment posted by question

look a this

Comment posted by Djave

You have to save the colour to localStorage like you mention, but you don’t mention loading it when the page first loads – that will be what’s missing.

Comment posted by stepbysteptomathpro

@Djave Can you please tell me how/where I can load the localStorage part? Do you mean

Comment posted by stepbysteptomathpro

Thanks a lot! Can you also tell me how I can remove the background color if I click on another div? (So that always only 1 div is yellow)

Comment posted by Jawad Khan

Note, in above solution we are saving id of the buttons in localstorage (not the colors, i presume that any selected button will be yellow). Above code works for the first link as i provided id for it and there is onclick for it as well. You can use same approach for rest of the buttons. To unset the background colors we can put another condition in selected function. I will update my answer.

Comment posted by stepbysteptomathpro

Ok, thanks for your help. I only need the unset function, I adapted your code to make all buttons yellow onclick

Comment posted by Jawad Khan

Np, check now pls. you can just removeItem from the localstorage. Answer is updated.

Comment posted by stepbysteptomathpro

Thank you for your reply, but the color still changes to the default white color. Any clue why?

Comment posted by SMAKSS

@PoliticsStudent First of all, check your local storage and make sure the data is saving correctly. Then tell me,

Comment posted by stepbysteptomathpro

Hmm, the console says

Comment posted by SMAKSS

@PoliticsStudent So it seems element with class

By

Leave a Reply

Your email address will not be published. Required fields are marked *