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

Question

我对JavaScript非常陌生，我需要帮助配置此代码以允许弹出窗口仅在每个会话中发生一次。 我已经尝试搞乱让它工作，但没有让它工作。 请帮忙！

这是我的代码：

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

如果按会话表示每次用户访问页面而不是服务器端会话，则不需要ajax来存储每个会话的变量。

现代浏览器具有存储，它们保持客户端以进行简单的数据存储和操作（不是安全数据）。 您可以尝试使用sessionStorage在用户浏览页面时存储数据。 页面关闭时，数据会丢失：

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
}

要检查存储在sessionStorage的数据，请转到您的开发人员工具（在Chrome 56：F12 - >应用程序选项卡 - >会话存储（左侧菜单）中）。

所有现代浏览器都支持此功能 。

请注意， localStorage永久存储数据，因此如果用户关闭您的页面并明天返回，则不会显示弹出窗口，因为数据仍然可用。 它似乎不是你想要的行为。