如果接受则不会再次显示 Cookie 同意弹出窗口

Question

假设用户单击 cookie 同意弹出窗口中的“接受”链接，则该弹出窗口不应在 24 小时内再次显示。有人可以告诉我如何完成这件事吗？

<div id="cookieConsent">
  <div id="closeCookieConsent">x</div>
  This website is using cookies. <a href="cookies-policy" target="_blank">More info</a>. <a class="cookieConsentOK"><b>ACCEPT</b></a>
</div>

$(document).ready(function() {
  setTimeout(function() {
    $("#cookieConsent").fadeIn(200);
  }, 4000);
  
  $("#closeCookieConsent, .cookieConsentOK").click(function() {
    $("#cookieConsent").fadeOut(200);
  });
});

Answer 1

我对您的代码进行了一些更改，以存储一个值为 true 的本地变量，并且从用户单击“接受”时起，过期时间为 10 秒。将此部分更改为如下内容：

now.getTime() + (1000 * 60 * 60 * 24)

每次加载页面时，脚本都会查找此存储的变量，以及过期时间是否大于存储的值然后删除存储的变量并再次显示 cookie 接受消息。

这里是代码：

<div id="cookieConsent" style="visibility: hidden;">
    <div id="closeCookieConsent">x</div>
    This website is using cookies. <a href="cookies-policy" target="_blank">More info</a>. <a class="cookieConsentOK"><b>ACCEPT</b></a>
</div>

<script type="text/javascript">
    $(document).ready(function(){   

        var consentStr = localStorage.getItem('cookieSeen');

        if(!consentStr) {
            $("#cookieConsent").css('visibility','visible').hide().fadeIn(200);
        } else {
            var consent = JSON.parse(consentStr);
            const now = new Date();

            if (now.getTime() > consent.expiry) {
                localStorage.removeItem('cookieSeen');
                return null;
            }           

            //console.log('Cookie accepted');
        }

        $("#closeCookieConsent, .cookieConsentOK").click(function() {
            const now = new Date();
            const item = {
                value: true,
                expiry: now.getTime() + 10000,
            };
            localStorage.setItem('cookieSeen', JSON.stringify(item) );
            $("#cookieConsent").fadeOut(200);
        }); 
    }); 
</script>