Save current state after jquery click function

Question

I am trying to hide a button after clicking another button but as when the page refreshed, the hidden button shows up again. I wanted to remain it hidden even if I refresh the page and show it only if I click the show button. Any help would be much appreciated.

HTML:

<button type="button" class="showhide">Show / Hide</button>
<button type="button" class="link">Link</button>

JS:

$('.showhide').click(function(){
 $('.link').hide();
});

use [sessionStorage](https://developer.mozilla.org/en/docs/Web/API/Window/sessionStorage) — Kartikeya Khosla, May 31 '16 at 06:38

Pimmol · Accepted Answer · 2016-05-31T07:02:00.190

Like @Kartikeya said, use localStorage.

Set it when you click the button. On page load check the value of the localStorage to update the visibility of the button.

$('.showhide').click(function(){
    $('.link').toggle();

    var isVisible = $('.link').is(":visible"); 
    localStorage.setItem('visible', isVisible);
});

// stored in localStorage as string, `toggle` needs boolean
var isVisible = localStorage.getItem('visible') === 'false' ? false : true;
$('.link').toggle(isVisible);

https://jsfiddle.net/undm500w/8/

score 6 · Answer 2 · answered May 31 '16 at 06:44

6

You can handle it on client end with localStorage by below code. or you need to use sessionStorage at your server script.

if(localStorage.getItem('isHide'))
  $('.link').hide();
$('.showhide').click(function(){
  $('.link').hide();
  localStorage.setItem('isHide',true);
});

answered May 31 '16 at 06:44

Niketan Raval

479
2
10

Question, when I click again the show it doesn't show the `link` button. How to show it again? – claudios May 31 '16 at 06:55
The easiest is to use [`toggle`](http://api.jquery.com/toggle/) instead of `hide`. – Quentin Roy May 31 '16 at 06:59
for that you need to use toggling event $('.showhide').click(function(){ $('.link').toggle();localStorage.setItem('isHide',true); }); – Niketan Raval May 31 '16 at 07:01

score 3 · Answer 3 · answered May 31 '16 at 06:47

If you want the button to remain hidden even after closing the browser you should consider using localStorage, more on it here, otherwise I suggest going with sessionStorage which is something similar to sessions, that means that everything stored on the session storage will be removed when you close the browser. You can read about the session storage here

Basically there two functions you need to use. The getItem and the setItem. This is a demonstration using the sessionStorage but applies for the localStorage too:

   $(document).ready(function(){
       if(sessionStorage.getItem('isBtnHidden')){
           $('.link').hide();
       }

       $('.link').click(function(){
          $('.link').hide();
          sessionStorage.setItem('isBtnHidden', true);
       });
   });

Thanks. this is also working same as the previous answer. I'll pick `localStorage` coz I wanted to hide it forever and just show it back when Clicking show button — claudios, May 31 '16 at 06:53

Save current state after jquery click function

3 Answers3

Linked