JS cookie栏不会在刷新时重复。

Question

有个饼干吧：

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已经被同意，因此再也不会出现在那个浏览器中。

有人帮我吗？谢谢。

Answer 1

这里是唯一缺少的东西( 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