Toggle Elements on Page refresh on click using local storage javascript

I am facing the following problem:

I want to start the page with "#Before" and "#After" hidden. - When I click on the button "Go Back", "#Before" should be shown. - When I click on the button "Go Forward", "#After" should be shown.

But when I am clicking to show only one of the elements, and then I refresh the page. After refresh the other element is also shown. So I am seeing the two elements although I clicked only on one button.

How can I modify this code to let it work when I only want to toggle and save one of the two Elements, or when I also want to toggle both of them.

I searched a lot in the last days and found nothing. I would be very thankful and you would save my day!

Link to the code on jsfiddle

https://jsfiddle.net/bisch_basch/6orxn6kq/10/

HTML Code:

<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"> </script>
<script type='text/javascript' src='main.js'></script>
<body>
<div class="menu" id="myHeader">
    <a style="float:left" href="#">Menu</a>
    <a id="Before" href="#"> Back </a>
    <a id="Current" href="#"> Current </a>
    <a id="After" href="#"> After </a>
</div>
<button id="Button1"> Go Back </button>
<button id="Button2"> Go Forward </button>
</body>
</html>

JavaScript Code

$(document).ready(function(){

$("#Before").css('display','none');

$("#After").css('display','none');

$("#Button1").click(function(){
    $("#Before").toggle(); 

    var isVisible = $("#Before").is(":visible"); 
    localStorage.setItem('visible', isVisible);
});
    var isVisible = localStorage.getItem('visible') === 'false' ? false : true;
    $("#Before").toggle(isVisible);

$("#Button2").click(function(){
    $("#After").toggle(); 

    var isVisible = $("#After").is(":visible"); 
    localStorage.setItem('visible', isVisible);
});
    var isVisible = localStorage.getItem('visible') === 'false' ? false : true;
    $("#After").toggle(isVisible);

});

2 answers

  • answered 2018-03-11 14:10 Alex Yokisama

    Is that what you need?

    $(function() {
      var isVisible;
      $("#After, #Before").toggle(false);
    
      if (localStorage.getItem('before_visible') != null) {
        isVisible = localStorage.getItem('before_visible') === 'false' ? false : true;
        $("#Before").toggle(isVisible);
      }
      if (localStorage.getItem('after_visible') != null) {
        isVisible = localStorage.getItem('after_visible') === 'false' ? false : true;
        $("#After").toggle(isVisible);
      }
    
      $("#Button1").click(function(){
          $("#Before").toggle();
          localStorage.setItem('before_visible', $("#Before").is(":visible"));
      });
    
      $("#Button2").click(function(){
          $("#After").toggle();
          localStorage.setItem('after_visible', $("#After").is(":visible"));
      });
    });
    

  • answered 2018-03-11 14:14 Shiven Sinha

    Here's the fiddle: JSFiddle

    Actually, you were just storing the state of the #After and #Before elements in a single localstorage key. Both referenced to the same key visible. So, even if one link, say 'Go Back', modified the key (intending to set the visibility to true for the #Before element), the same key was checked to determine the visibility of #After. As a result, #After too became visible, as it found the visible key in localstorage to be true.

    What you needed to do was to separately store the visibility states for #After and #Before.