Using localStorage () to save the "closed" state in modal mode so that it does not appear again for this user

Question

I have a pop-over modal that I upload to my page when it loads, I would like to do this as soon as it is closed so as not to be displayed again for this user. I did similar things with localStorage(); but for some reason I can’t understand the syntax to make this work.

I tried the solution in which it sets the class, but when updating it will reload the original item, so now I try this idea when I change the modality state to “visited”. Any ideas what I could lose to get this to work the way I hope?

localStorage function:

 $(function() { if (localStorage) { if (!localStorage.getItem('visited')) { $('.projects-takeover').show(); } } else { $('.projects-takeover').show(); } $('.projects-close').click(function() { $('.projects-takeover').fadeOut(); }); localStorage.setItem('visited', true); return false; }); 

Below is jsfiddle using code, thanks for help!

Answer 1

The javascript code is correct. It's good that you added jsfiddle, because the problem becomes very easy to identify - the modal style is set in such a way that it is always visible. Just change the display property to non in the .projects-takeover class, and it should work. Check out the updated fiddle

Answer 2

Try it →

 $(function() { var pt = $('.projects-takeover'); //i just hate repeating myself. if (localStorage) { if (!localStorage.getItem('visited')) { pt.show(); } else { pt.hide(); //this bit was missing } } else { pt.show(); } $('.projects-close').click(function() { pt.fadeOut(); }); localStorage.setItem('visited', true); return false; });