Работа с cookies на jQuery

Нужно быстро сделать какое-нибудь действие на сайте, чтобы записать его в куки и запомнить на этом устройстве. Это допустим всплывающее окошко, которое предупреждает о чём-то и после его закрытия не появляется еще долго.

На выручку пришел сайт https://codernote.ru/jquery/rabota-s-cookies-na-jquery/ на нем подробно описано как это реализовать.

Я же реализовал так:

Скачал файл с github.com

Подключил его, при условии, что библиотека jQuery подключена.

<script type="text/javascript" src="https://elmagaz.ru/js/jquery.cookie.js"></script>

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

<div class="mobile_hand_scrolle_table">
    <div class="popup_hand">
        <img src="/img/hand_scrolle.png">
        <p>двигайте таблицу чтобы увидеть целиком</p>
        <span>понятно</span>
    </div>
</div>

Прописал скрипт, который проверяет определена ли кука и если нет, до добавляет класс к блоку «mobile_hand_scrolle_table» .show_popup при нажатии на это окно, класс .show_popup удаляется, и в куки записывается переменная show_scroll_table=yes и в последствии это окно будет скрыто по истечении 365 дней.

mobile_hand_scrolle_table

<script type="text/javascript">
if ( jQuery.cookie('show_scroll_table') == null ) {
    jQuery('.mobile_hand_scrolle_table').addClass('show_popup');
}
    else {
jQuery('.mobile_hand_scrolle_table').removeClass('show_popup');
}

jQuery('.mobile_hand_scrolle_table .popup_hand').on('click', function(e){
    e.preventDefault();
    jQuery('.mobile_hand_scrolle_table').removeClass('show_popup');
    jQuery.cookie('show_scroll_table', 'yes', { expires: 365, path: '/' });
});
</script>

Где expires: 365 - это количество дней жизни переменной, path: '/' — это для всех страниц сайта установлена кука, можно прописывать конкретный адрес.

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

.mobile_hand_scrolle_table {
    display:none;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(2, 2, 2, 0.55);
    justify-content: center;
    align-items: flex-start;
}
.mobile_hand_scrolle_table .popup_hand {
    display: inline-flex;
    padding: 20px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 12px;
    margin:105px 0 0 0;
    border-radius: 9px;
    background: rgba(255, 255, 255, 0.82);
    width: 190px;
}
.mobile_hand_scrolle_table .popup_hand img {
    width: 53px;
    height: 53px;
}
.mobile_hand_scrolle_table .popup_hand p {
    color: #000;
    text-align: center;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}
.mobile_hand_scrolle_table .popup_hand span {
    display: flex;
    padding: 10px 30px;
    align-items: flex-start;
    gap: 10px;
    border-radius: 8px;
    background: #FFF;
    color: #000;
    text-align: center;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}
@media only screen and (max-width: 768px) {
    .mobile_hand_scrolle_table.show_popup {
        display: flex;
    }
}