Show jQuery popup only at first visit of a page

Question

I am new to jQuery, and I have some needs on my website. I want to show the jQuery div popup at the first time only when the user comes. No need to show again and again.

Still I am using this, but I don't know how to hide at the second time:

var isshow=0;
$(document).ready(function() {
   if (isshow == 0) {
     $('#jPopup').show();
   }
   isshow = 1;
});

But the ishow variable initializes every time.

Answer 1

You can use localstorage. It is easy to understand and use.

$(document).ready(function() {
    var isshow = localStorage.getItem('isshow');
    if (isshow== null) {
        localStorage.setItem('isshow', 1);

        // Show popup here
        $('#jPopup').show();
    }
});

It will show you the popup at first visit of your site.

Answer 2

You may use SessionStorage or LocalStorage for this as per your need.

If you need to do only for that session, use SessionStorage. If it should be stored permanently in the user's browser, use LocalStorage.

    $(document).ready(function(){
        if(sessionStorage && !sessionStorage.getItem('isshow')){
            $('#jPopup').show();
            sessionStorage.setItem('isshow', true);
        }
    });

Answer 3

You can use localstorage. It is easy to understand and use.

$(document).ready(function() {
    var isshow = localStorage.getItem('isshow');
    if (isshow== null) {
        localStorage.setItem('isshow', 1);

        // Show popup here
        $('#jPopup').show();
    }
});

It will show you the popup at first visit of your site.

Answer 4

You can use localStorage for this purpose as below:

$(document).ready(function(){
   var shown= localStorage.getItem('isshow');
    if(shown !="t"){
        $('#jPopup').show();
        localStorage.setItem('isshow', "t");
    }
});

Answer 5

You can set a cookie to store a value and check if it is not set then show popup:

$(document).ready(function() {
    var isshow = $.cookie("isshow");
    if (isshow == null) {
        $.cookie("isshow", 1); // Store

        // Show popup here
        $('#jPopup').show();
    }
});

Or you can set localStorage. Here is a working example. jsFiddle

$(document).ready(function() {
    if(localStorage.getItem('popState') != 'shown') {
        $("#popup").delay(2000).fadeIn();
        localStorage.setItem('popState','shown')
    }
});