Показать приветственный div только один раз на сеанс пользователя/браузера

Я хочу показать приветственный div только один раз на пользователя или сеанс. Я знаю, что есть опция JQuery. Поскольку я новичок в jquery, я сам не смог его решить. Пожалуйста, помогите

$(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>

Ответ 1

Установите файл cookie.

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

Вам нужно включить javascript файл jQuery.cookie.

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

Ответ 2

Если ваш клиент не кушает куки

Вы можете использовать sessionStorage, после всего, что они предназначены именно для этого, держите набор данных под рукой на протяжении всего сеанса.

Для лучшего пользовательского опыта вы должны начать с начального [wellcomeElement].style.display = "none" в существующем CSS.

Итак, вся процедура станет такой же простой, как...

проверьте, было ли сообщение приветствия
Show! : Бездействие!

Готово.

Пример кода:

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

Снимку кода можно поместить (но более предпочтительно) в script -tag сразу после элемента приветственного сообщения.

Однако для полной обратной совместимости вы всегда можете вернуться к использованию свойства имя сеанса, как в:

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

С уважением.

Ответ 3

Это лучше, потому что мы не увидим мигание при скрытии на лету

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

    }
});