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.

Answer 1

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 2

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 3

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 4

You need to hide it on load or do it in css (recommended)and then check localstorage to see if it is the first visit.

$(document).ready(function() {
        $('#jPopup').hide(); //hide on load or in css, later check if its the first visit
        var isshow= localStorage.getItem('status');
        //check if it is the first visit
        if (isshow == null || isshow == '') {
            //set variable to 1
            localStorage.setItem('isshow', 1);
            $('#jPopup').show();
        }
        });

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')
    }
});