monemacu monemacu - 2 months ago 8
CSS Question

store value in javascript after page load?



$("#divid1").click(function(){
$("#divid1").hide(); //want this to keep hidden after refresh
$("#hideid1").hide(); //want this to keep hidden after refresh
$("#id1").show(); //want this to keep showing after refresh
});

.hide{
display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="/img/done.png" id="divid1" alt="divid1"/>
<img src="/img/schedule.png" height="12" width="12" id="hideid1" alt="hideid1" />
<div id="id1" class="hide"><img src="/img/done.png" height="12" width="12" alt="id1" /></div>





i am trying to show image after page load, when onclick(); show new image and hide old image.
but, on page refresh it resets.

kindly give me a way to solve it.

Working code with my ids in it will be appreciated!!

Answer

Check out the Example. This should make it clear enough.

JS

$("#divid1").click(function(){
   $("#divid1").hide(); //want this to keep hidden after refresh
   $("#hideid1").hide(); //want this to keep hidden after refresh
   $("#id1").show(); //want this to keep showing after refresh
   localStorage.setItem('hidden', true);
});

$(function() {
   // if localStorage has hidden as true, hide the div and show other
   if(localStorage.getItem('hidden')){
     $("#divid1").hide(); 
     $("#hideid1").hide(); 
     $("#id1").show();
   }
});