Question

我希望当我点击“Cookies”按钮时，该消息将不会再次显示。当接受“cookies”时，他们有时间存储设备。我需要你的帮助。：）

这是 html 和 js 代码：

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

<div id="cookieConsent">
    <div id="closeCookieConsent">x</div>
    This website is using cookies. <a href="files/c11bg_cookie_policy.pdf" target="_blank">More info</a>. <a class="cookieConsentOK">I agree!</a>
</div>

Answer 1

您可以在用户的浏览器上放置一个cookie，如果cookie存在，请检查页面的加载情况，如下面的代码所示。当您点击x或“我同意！”时链接，该消息将不会再次显示。

您可以重新加载未重新显示的页面。

你必须删除cookie才能再次看到该消息，所以我添加了一个按钮来删除cookie并重新加载页面。如果您单击“Click for delete cookie”，则cookie消失并发送消息apear。

<!DOCTYPE html>

    <head>
    <title>Stack Overflow</title>
    <body onload="checkBtn()">

    <div id="cookieConsent" style="display:none">
        <div id="closeCookieConsent" onClick=javascript:addBtn();>x</div>
        This website is using cookies. <a href="files/c11bg_cookie_policy.pdf" target="_blank">More info</a>. <a href="#" onClick=javascript:addBtn(); class="cookieConsentOK">I agree!</a>
    </div>
    <br/>
    <br/>
    <br/>
    <br/>
    <div id=btnHolder ><input type="button" onClick=javascript:delCookie("btn"); value="Click for delete cookie" /></div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script>
    /*$(document).ready(function(){   
    setTimeout(function () {
        $("#cookieConsent").fadeIn(200);
     }, 4000);
    $("#closeCookieConsent, .cookieConsentOK").click(function() {
        $("#cookieConsent").fadeOut(200);
    });*/



    function addBtn(){
        if(getCookie("btn"))
            document.getElementById('cookieConsent').style.display = 'none'; 
        document.getElementById('cookieConsent').style.display = 'none'; 
        setCookie("btn",true,5);
      }
    function checkBtn(){
        if(!getCookie("btn"))
            document.getElementById('cookieConsent').style.display = ''; 
      }
    function setCookie(cname,cvalue,exdays) {
                  var d = new Date();
                  d.setTime(d.getTime() + (exdays*24*60*60*1000));
                  var expires = "expires=" + d.toGMTString();
                  document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
              }
    function  getCookie(cname){
                return (document.cookie.match('(^|; )'+ cname +'=([^;]*)')||0)[2]
            }
    function  delCookie(cname) {
            document.cookie = cname+"=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";
            window.location.reload();
        }

    </script>
    </body>

我评论了jquery部分，因为它给了我一个错误。

Answer 2

存储Cookie并检查页面加载，如果它没有任何关系。

＆＃13;

$(document).ready(function() {
  $('#cookieConsent').hide();
  if(getCookie('cookieAccepted') == null) {
    setTimeout(function () {
      $("#cookieConsent").fadeIn(200);
      }, 4000);
      $("#closeCookieConsent, .cookieConsentOK").click(function() {
        setCookie('cookieAccepted', 'cookieAccepted', 90);
        $("#cookieConsent").fadeOut(200);
      });
    }
});
  
function setCookie(cname, cvalue, exdays, domain) {
  var d = new Date();
  d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
  var expires = "expires=" + d.toUTCString();
  var cookieString = cname + "=" + cvalue + ";" + expires + ";path=/;";
  if(domain && domain != '') {
    cookieString += "domain="+domain+";"
  }
  document.cookie = cookieString;
}

function getCookie(cname) {
  var name = cname + "=";
  var ca = document.cookie.split(';');
  for (var i = 0; i < ca.length; i++) {
    var c = ca[i];
    while (c.charAt(0) == ' ') {
      c = c.substring(1);
    }
    if (c.indexOf(name) == 0) {
      return c.substring(name.length, c.length);
    }
  }
  return null;
}

＆＃13;

<div id="cookieConsent">
    <div id="closeCookieConsent">x</div>
    This website is using cookies. <a href="files/c11bg_cookie_policy.pdf" target="_blank">More info</a>. <a class="cookieConsentOK">I agree!</a>
</div>

＆＃13;

到期的时间是“cookies”和关闭功能

2 个答案: