如何在每次访问时显示一次JavaScript弹出窗口？

Question

I am extremely new to JavaScript and I am in need of help with configuring this code to allow the pop-up to only occur once every session. I have tried messing around to get it to work, but didn't get it to work. Please help!

Here is my code:

jQuery(document).ready(function(){

    jQuery('#preview_help').hide(); 


    jQuery( '.mlab-close' ).on( 'click', function() {
        //When clicking on the close or fade layer...
        jQuery( '.mlab-modal' ).fadeOut( function() {
             jQuery( '#mlab-modal-backdrops' ).hide();  
        }); //fade them both out        
        return false;
    });


    jQuery('#mlab_popup_preview').on('click', function() { 
        //reset
        jQuery('.mlab-modal-title').html('');
        jQuery('.mlab-modal-body').html('');
        jQuery('.mlab-modal-label').val('');
        jQuery('.mlab-modal-link').attr("href", "#")
        jQuery( '.mlab-modal-footer' ).hide();
        jQuery( '.mlab-modal-donotshow' ).hide();
        //get       
        var titre = jQuery('#popup_titre').attr( 'value' );
        var text  = jQuery('#popup_content').val(); 
        var width = jQuery('#popup_width').attr( 'value' ); 
        var label = jQuery('#popup_label').attr( 'value' ); 
        var url = jQuery('#popup_link').attr( 'value' ); 
        var notshow = jQuery('#popup_donotshow' ).prop('checked')  
        //set
        if ( url.length > 0 && label.length > 0){ 
            jQuery( '.mlab-modal-footer' ).show();          
        }
        if( notshow ){
            jQuery( '.mlab-modal-donotshow' ).show();
        }
        jQuery('.mlab-modal-title').html( titre );
        jQuery('.mlab-modal-body').html( text ); 
        jQuery('.mlab-modal-dialog').css( "width", width+'px' );
        jQuery('.mlab-modal-label').val(label);
        jQuery('.mlab-modal-link').attr("href", url)

        jQuery('.mlab-modal').fadeIn(); 
    }); 

    if ( jQuery( '#mlab_popup_preview' ).is( ':disabled' ) == true ){ 
            jQuery( '#mlab_popup_preview' ).prop( 'disabled', false );
            jQuery( '#preview_help' ).hide();   
        }

    // Preview only available on text editor    
    jQuery('#popup_content-tmce').on('click', function() {           
        if ( jQuery('#mlab_popup_preview').is(':disabled') == false ){ 
            jQuery('#mlab_popup_preview').prop('disabled', true); 
            jQuery('#preview_help').show(); 
        } 
    }); 


    jQuery('#popup_content-html').on('click', function() {       
        if ( jQuery( '#mlab_popup_preview' ).is( ':disabled' ) == true ){ 
            jQuery( '#mlab_popup_preview' ).prop( 'disabled', false );
            jQuery( '#preview_help' ).hide();
        } 
    }); 


    function readURL(input) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();

            reader.onload = function (e) {
                jQuery("#preview_image").attr("src", e.target.result);
            }
            reader.readAsDataURL(input.files[0]);
        }
    }

    jQuery("#popup_img").change(function(){
        readURL(this);
    });


    jQuery("#donotshow").change(function(){ 
        SetAjax( 'session', jQuery(this).prop('checked') ); 
    });

    function SetAjax( tag, param ){
        jQuery.ajax({
          method: "POST",
          url: popup_object.ajax_url,
          data: { tag: param }
        })              
    }

});

Answer 1

You don't need ajax to store a variable per session , if by session you mean each time user access the page, and not a server-side session.

Modern browsers has a storage they keep client-side for simple data store and manipulation(not being secure data). You can try using sessionStorage which stores data while user is browsing your page. When the page is closed, the data is lost:

var hasVisited = sessionStorage.getItem("hasVisited");

// If falsy, user didn't visited your page yet.
if (!hasVisited) { 
    sessionStorage.setItem("hasVisited", true);
    showPopup(); // Shows popup only once
}

To check your data stored in sessionStorage , go to your Developer Tools(in Chrome 56: F12 -> Application tab -> Session Storage (left menu)).

This feature is supported in all modern browsers out there.

Note that localStorage stores the data permantently, so if user closes your page and get back tomorrow, the popup won't be shown, as the data will still be available. It doesn't seems to be the behaviour you desire.