Comment afficher la bannière de manière super restreinte au premier visiteur?

Question

J'ai cette bannière de texte sur mon site. Je veux le montrer seulement aux nouveaux visiteurs utilisant des cookies. J'ai très peu de connaissances de JS alors s'il vous plaît aidez-moi comment puis-je le montrer uniquement aux nouveaux visiteurs. Je l'utilise sur Discuter this Android forum site qui est déjà construit sur Node.js.

<style> 
.top { 
    background: linear-gradient(to right, #141517, #6A9113); 
    border-radius: 10px; 
    font-size: 20px; 
    color: white; 
    opacity: 0.9; 
    text-align: center; 
    padding: 25px; 
    line-height: 30px; 
    margin: 10px 0px 30px 0px; 

} 
</style> 


<div class="top"> 
Welcome to the forum. This is demo text. 
</div> 

Answer 1

Voici le code complet ... travail démo https://jsfiddle.net/hdas2012/6yjo346k/

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script> 

<div class="top"> 
<h2>You will only see it once</h2> 
    Welcome to the forum. This is demo text. 
</div> 

<script> 
    $(document).ready(function(){ 
     if(!$.cookie('welcomeMsg')){ 
     $(".top").show(); 
     $.cookie('welcomeMsg', 'Y', { expires: 365*3 }); 
     } 
    }); 
</script> 
<style> 
    .top { 
     background: linear-gradient(to right, #141517, #6A9113); 
     border-radius: 10px; 
     font-size: 20px; 
     color: white; 
     opacity: 0.9; 
     text-align: center; 
     padding: 25px; 
     line-height: 30px; 
     margin: 10px 0px 30px 0px; 
     display: none; 
    } 
</style> 

Answer 2

Go pour ce code:

.top devrait être par défaut display: none;

$(document).ready(function() { 
    var visited = $.cookie("visited") 
    if (visited == null) { 
     $('.top').show(); 
     alert($.cookie("visited"));   
    } 
    $.cookie('visited', 'yes', { expires: 1, path: '/' }); 
});