Панель cookie JS не будет повторяться при обновлении

avatar
miii
8 августа 2021 в 18:50
28
1
0

Получил эту панель cookie:

HTML:

<div id="cookie-bar-bottom" class="cookie-bar">text...
<a href="index-cookies.html" class="cookie-policy">
   <b><text style="color: rgb(230,0,100)">Cookies</text></b>
</a>
<input id="cookie-hide" class="cookie-hide" onclick="this.parentNode.parentNode.style.display = 'none'" value="Agree" type="button">
</div>

CSS:

.cookie-bar {
    position: fixed;
    width: 100%;
    bottom: 0;
    right: 0;
    left: 0;
    height: 30px;
    text-align: center;
    line-height: 25px;
    background: rgb(0,140,250,1);
    color: white;
    font-size: 17px;
    font-weight: 100;
    transition: .8s;
    animation: slideIn .8s;
}

Мне нужно лучшее решение, вероятно, через JS, чтобы предотвратить появление панели cookie при следующем обновлении. В идеале, чтобы кеш браузера помнил, что этот файл cookie уже был принят, и поэтому он никогда больше не появится в этом браузере.

Кто-нибудь помогает мне? Спасибо.

Источник

Ответы (1)

avatar
zenull
29 января 2022 в 08:52
0

Вот единственное, чего не хватает (функциональность JS):

<script>
function closeCookieNotice() {
    const nowDate = new Date();
    const expireDate = new Date(nowDate.setDate(nowDate.getDate() + 30)).toUTCString();
    document.cookie = "cookie_notice=0;path=/;expires=" + expireDate + ";";
    document.getElementById("cookie-bar-bottom").style.display = "none";
};
document.addEventListener("DOMContentLoaded", function() {
    const cookie_notice = ('; ' + document.cookie).split('; cookie_notice=').pop().split(';')[0];
    if (cookie_notice !== "0") {
        document.getElementById("cookie-bar-bottom").style.display = "block";
    }
});
</script>

Объяснение: он устанавливает файл cookie при закрытии панели и проверяет, установлен ли файл cookie при загрузке страницы. Если файл cookie установлен, панель не отображается. Простой, легкий и отлично справляется со своей задачей.

Вы можете получить больше стилей/тем уведомлений о файлах cookie здесь: https://cookienotice.js.org/themes