Mostra div di benvenuto una sola volta per sessione utente/browser

Question

Desidero mostrare un div di benvenuto solo una volta per utente o sessione. So che esiste un'opzione Jquery. Dato che sono un principiante di jquery, non sono stato in grado di risolverlo da solo. Aiutateci

$(document).ready(function() { 
 
    $("#close-welcome").click(function() { 
 
    $(".welcome").fadeOut(1000); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="welcome"> 
 
    <div> 
 
    <h1>Hello..!<br> Welcome to ABC 
 
    <br> 
 
    </h1> 
 
    <h2>We wish you a Great Day..!</h2> 
 
    <br> 
 

 
    <h2><a id="close-welcome" href="#">Thank you.. and please take me to the  website</a> </h2> 
 
    </div> 
 
</div>

voglio mostrare questa pagina di benvenuto solo una volta, fino a quando l'utente chiude il browser .. In attesa di prezioso aiuto

Answer 1

impostare un cookie.

$(document).ready(function() { 
    if ($.cookie('noShowWelcome')) $('.welcome').hide(); 
    else { 
     $("#close-welcome").click(function() { 
      $(".welcome").fadeOut(1000); 
      $.cookie('noShowWelcome', true);  
     }); 
    } 
}); 

è necessario includere jQuery.cookie file JavaScript.

https://raw.githubusercontent.com/carhartl/jquery-cookie/master/src/jquery.cookie.js

Answer 2

E 'meglio, perché non vedremo lampeggiare quando si nasconde sul fly

<a href="" id="close-edu" class="waves-effect"><span class="edu" style="display: none;">New</span></a> 

jquery

$(document).ready(function() { 
    if ($.cookie('noShowEducation')) ; 
    else { 
     $('.edu').show(); 
     $("#close-edu").click(function() { 
      $(".edu").fadeOut(1000); 
      $.cookie('noShowEducation');  
     }); 

    } 
}); 

Answer 3

Nel caso in cui il vostro cliente non mangia i biscotti

È possibile utilizzare sessionStorage, dopotutto questo è ciò per cui sono pensati esattamente, tenere una raccolta di dati a portata di mano durante la sessione.

Per la migliore esperienza utente, è necessario iniziare con l'iniziale [wellcomeElement] .style.display = "nessuno" proprietà nel CSS esistente.

Così, l'intera procedura sarebbe diventato il più semplice ...

1. verifica se il messaggio di benvenuto è stato dimostrato
2. Show! : Take-no-action!

Fatto.

Esempio di codice:

"message" in sessionStorage ? 0 : 
    [wellcomeElement].style.display = "block", 
    sessionStorage.setItem("message",true); 

L'elemento di cattura codice può essere messo, (ma più che di preferenza) in uno script-tag subito dopo l'elemento di messaggio di benvenuto.

Tuttavia, per la piena compatibilità a ritroso, si può sempre ripiegare a utilizzare il nome della sessione proprietà come in:

/message/.test(name) ? 0 : 
[wellcomeElement].style.display = "block", 
name = 'message'; 

saluti.