how to hide bootstrap modal on second visit of a wordpress page

Question

i'm working on a page in wordpress with the Bootstrap theme. there is a modal window on page load having a registration form on it.user can not see the content without filing the form.my problem is that whenevr user comes back to that page it shows the modal window,and i want to restrict that to once for a user.How can i achieve that.

Here is my Js for modal:

<script type="text/javascript">
jQuery(document).ready(function($) {
    $('#DownloadSignup').modal('show');
});
</script>

Here is what i have tried but its not working:

<script>
jQuery(document).ready(function($) {
    var isshow = localStorage.getItem('status');
  // alert(isshow);
    if (isshow == null) {
        localStorage.setItem('isshow', 1);

        // Show popup here
        $('#DownloadSignup').modal('show');
    } else if(isshow != null) {
       $('#DownloadSignup').modal('hide');
    }
});
</script>

Answer 1

You need to use cache or sessions for this.

If want it for non-logged in user also, you should use cache. The cache need to be check if they exist on the system everytime the site is visited, if they are already set, don't show the modal. These will be set on the first visit, so that for every visit after that it will be already there thus hiding the modal.

If you need it with logged in user, you should use session, following same logic as above. Setting a value in session and checking if it exists before displaying the modal.

Answer 2

Change this

localStorage.setItem('isshow', 1);

to

localStorage.setItem('status', 'shown');

Answer 3

Use this code in your page, I hope it will help you.

<script>
    if (!localStorage['someName']) {
        localStorage['someName'] = 'yes';
        myFunction();
    }
</script>

Answer 4

I guess you are not checking it correctly if you checking for if local-storage is set or no then you have to check its type and value like below...

var = localStorage.getItem('status');
if (localStorage.getItem("isshow") === null) {
   //...
} 

Answer 5

Have you tried using Jquery Cookies. You can use this lib https://github.com/carhartl/jquery-cookie

$.cookie("Show", 1, {
   expires : 1,           //expires in 1 day

   path    : '/',          //The value of the path attribute of the cookie 
                           //(default: path of page that created the cookie).

   domain  : 'yourdomain.com',  //The value of the domain attribute of the cookie
                           //(default: domain of page that created the cookie).

   secure  : true          //If set to true the secure attribute of the cookie
                           //will be set and the cookie transmission will
                           //require a secure protocol (defaults to false).
});

If you are not interested in JQuery look at this other answer on how to set using native JS. https://stackoverflow.com/a/1460174/1411055