Save changed text to button on toggling Elements in localStorage Javascript

Question

I am trying to build a button in my web application to toggle elements, but I want that also the text in the button changes based on the action that should be done!

Here's the code:

$(".hideLink").on("click", function(){
    if($(this).text()=="Hide Products - ")
    {
        $(this).text("Show Products - ");
    } else {
        $(this).text("Hide Products - ");
    }
    $(".ISProductBody").toggle(); 
        
    return false;
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="ISBody">
     <h5>Header</h5>
     <div class="ISTopLink"><a href="#ISTop">Return to Top</div>
     <div class="ISHide"><a href="#" class="hideLink">Hide Products - </a></div>
     <hr>
     <div id="pos" style="display: block;">
      <div class="ISProductBody">
       <div class="ISSubHead"><A HREF="#">Prodcut Name</A></div>
      <div class="ISList">
       <ul>
        <li>Text here</li>
        <li>Text here</li>
        <li>Text here</li>
        <li>Text here</li>
      </ul>
      </div>
    </div>
    </div>

I want to keep the changes also on page refresh, so that it does not go back to its previous state. So like it saves whether the elements are hidden or shown, and the action to be done on button click!

I am very thankful for every tip or solution! Cheers!

Answer 1

I think that maybe you don't need to save the text, just saving the state (if is showing or is hiding) is enough. Because when you retrieve the state from the localStorage, you can check it and then define the text to show.

If you really want to save the text, just go ahead and follow the same logic used in the snippet below to save the state, and use it to save the text.

OBS: Here in the S.O my code won't work, it doesn't allow to use localStorage from snippet, try it out of here, then tell me if it is ok for you.

EDIT
When the page loads, it tries to find the locaStorage, if it found, then it will change as you need. Working fiddle: http://jsfiddle.net/mk96wrvq/

$(document).ready(function(){
  var actualState = localStorage.getItem('state');
  var btnJQ = $('.hideLink');  
  if (actualState != null){
    var myText = "";
    if (actualState == 'showing'){
      myText = "Hide Products";
    }else{
      myText = "Show Products";
      $(".ISProductBody").toggle(); 
    }       
    btnJQ.text(myText);
  }
  
  $(".hideLink").on("click", function(){
  var _thisJQ = $(this);
  if(_thisJQ.text() == "Show Products"){
      localStorage.setItem('state', 'showing');  
      _thisJQ.text("Hide Products"); 
      
  } else if (_thisJQ.text() == "Hide Products") {
    localStorage.setItem('state', 'hidden');  			            
    _thisJQ.text("Show Products");  
  }
  
  $(".ISProductBody").toggle(); 
});
  
});

    <div class="ISBody">
     <h5>Header</h5>
     <div class="ISTopLink"><a href="#ISTop">Return to Top</a></div>
     <div class="ISHide"><a href="#" class="hideLink">Hide Products - </a></div>
     <hr>
     <div id="pos" style="display: block;">
      <div class="ISProductBody">
       <div class="ISSubHead"><A HREF="#">Prodcut Name</A></div>
      <div class="ISList">
       <ul>
        <li>Text here</li>
        <li>Text here</li>
        <li>Text here</li>
        <li>Text here</li>
      </ul>
      </div>
    </div>
    </div>