简单cookie栏-关闭按钮

Question

我在试着做一个简单的曲奇棒。

这是我的代码。

​

#cookie-bar-bottom {
	bottom: 0;
}
.cookie-bar {
	width: 100%;
	line-height: 30px;
	left: 0;
	position: fixed;
	z-index: 100;
	background-color: rgba(0,0,0,0.70);
}
.cookie-content {
	color: white;
	text-align: center;
	padding-top: 10px;
}
.cookie-hide {
	margin-left: 80px;
	text-decoration: none;
	background-color: black;
	color: white;
	border: 1px solid white;
	outline: none;
}
.cookie-hide:hover {
	background-color: #155670;
}

<div id="cookie-bar-bottom" class="cookie-bar">
  	<div class="cookie-content">
    	<p>
        	We use cookies to enhance your experience in our web site. By visiting it, you agree our <a href="#" class="cookie-policy">Cookies Policy</a>.
            <input id="cookie-hide" class="cookie-hide" onclick="this.parentNode.parentNode.style.display = 'none'" value="I understand" type="button">
        </p>
    </div>
  </div>

​

当我按下“我明白”按钮时，它就会关闭。问题出在关闭按钮上，因为当我刷新我的网站时，cookie栏再次出现。当我刷新我的网站时，我不想看到它。

我不想使用任何PHP函数btw。我认为它应该是java/jQuery脚本/函数，并且应该与我的cookie条形码结构一起工作。

Answer 1

问题出在关闭按钮上，因为当我刷新我的网站cookie栏时，它会再次出现。当我刷新我的网站时，我不想看到它。

发生这种情况的原因是，如果cookie已经存在，则不创建相应的cookie并对文档就绪进行测试。

在How do I create and read a value from cookie?中，您可以编写类似这样的代码：

document.addEventListener('DOMContentLoaded', function(e) {
       if (getCookie('ItsAllOk').length > 0) {
         document.getElementById('cookie-bar-bottom').style.display = 'none';
       }
        document.getElementById('cookie-hide').addEventListener('click', function(e) {
            createCookie('ItsAllOk', true, 1);
        })
});

代码片段：

document.addEventListener('DOMContentLoaded', function(e) {
  if (getCookie('ItsAllOk').length > 0) {
    document.getElementById('cookie-bar-bottom').style.display = 'none';
  }
  document.getElementById('cookie-hide').addEventListener('click', function(e) {
    createCookie('ItsAllOk', true, 1);
  })
});



var createCookie = function(name, value, days) {
  var expires;
  if (days) {
    var date = new Date();
    date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
    expires = "; expires=" + date.toGMTString();
  }
  else {
    expires = "";
  }
  document.cookie = name + "=" + value + expires + "; path=/";
}

function getCookie(c_name) {
  if (document.cookie.length > 0) {
    c_start = document.cookie.indexOf(c_name + "=");
    if (c_start != -1) {
      c_start = c_start + c_name.length + 1;
      c_end = document.cookie.indexOf(";", c_start);
      if (c_end == -1) {
        c_end = document.cookie.length;
      }
      return unescape(document.cookie.substring(c_start, c_end));
    }
  }
  return "";
}

#cookie-bar-bottom {
  bottom: 0;
}
.cookie-bar {
  width: 100%;
  line-height: 30px;
  left: 0;
  position: fixed;
  z-index: 100;
  background-color: rgba(0,0,0,0.70);
}
.cookie-content {
  color: white;
  text-align: center;
  padding-top: 10px;
}
.cookie-hide {
  margin-left: 80px;
  text-decoration: none;
  background-color: black;
  color: white;
  border: 1px solid white;
  outline: none;
}
.cookie-hide:hover {
  background-color: #155670;
}

<div id="cookie-bar-bottom" class="cookie-bar">
    <div class="cookie-content">
        <p>
            We use cookies to enhance your experience in our web site. By visiting it, you agree our <a href="#" class="cookie-policy">Cookies Policy</a>.
            <input id="cookie-hide" class="cookie-hide" onclick="this.parentNode.parentNode.style.display = 'none'" value="I understand" type="button">
        </p>
    </div>
</div>

Answer 2

您可以使用localStorage在有人接受时存储项目，并且仅在项目不存在时显示cookie栏。

​

if (!localStorage.getItem('cookie')) {
  $('#cookie-bar-bottom').show();
}

$('#cookie-hide').on('click',function() {
  localStorage.setItem('cookie',true);
  $('#cookie-bar-bottom').hide();
})

#cookie-bar-bottom {
	bottom: 0;
  display: none;
}
.cookie-bar {
	width: 100%;
	line-height: 30px;
	left: 0;
	position: fixed;
	z-index: 100;
	background-color: rgba(0,0,0,0.70);
}
.cookie-content {
	color: white;
	text-align: center;
	padding-top: 10px;
}
.cookie-hide {
	margin-left: 80px;
	text-decoration: none;
	background-color: black;
	color: white;
	border: 1px solid white;
	outline: none;
}
.cookie-hide:hover {
	background-color: #155670;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="cookie-bar-bottom" class="cookie-bar">
  	<div class="cookie-content">
    	<p>
        	We use cookies to enhance your experience in our web site. By visiting it, you agree our <a href="#" class="cookie-policy">Cookies Policy</a>.
            <input id="cookie-hide" class="cookie-hide" value="I understand" type="button">
        </p>
    </div>
  </div>

​

Answer 3

您想要实现的目标很简单。但还需要更多的JavaScript。

容易实现的代码(只需复制/粘贴)就在这里：https://cookienotice.js.org

编辑：完整解决方案

HTML：将以下代码添加到 <head></head>部分。

<style>
#cookie-notice {
    display: none;
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 999;
    max-width: 450px;
    margin: auto;
    padding: 0.5rem;
    border: 1px solid #eee;
    background-color: #fefefe;
    box-shadow: 0 0 0.25rem rgba(0, 0, 0, 0.05);
    font-family: Arial, Helvetica, sans-serif;
    line-height: 22px;
    font-size: 15px;
    text-align: center;
    color: #555;
}
.cookie-notice-more {
    margin: 0 0.25rem;
    text-decoration-style: dashed;
    color: inherit;
}
.cookie-notice-close {
    padding: 0 0.5rem;
    border: 1px solid #ddd;
    border-radius: 0.125rem;
    line-height: 20px;
    text-decoration: none;
    color: #888;
}
@media only screen and (min-width: 768px) {
    #cookie-notice {
        bottom: 1rem;
        border-radius: 0.25rem;
    }
    .cookie-notice-close {
        float: right;
    }
}
</style>

通知块：将以下代码添加到您的HTML <body></body>部分。

<div id="cookie-notice">
    We use cookies to deliver better experience.
    <a href="https://cookienotice.js.org/about-cookies" class="cookie-notice-more" target="_blank" rel="noopener">More info...</a>
    <a href="javascript:void(0)" class="cookie-notice-close" onclick="closeCookieNotice()">OK</a>
</div>

HTML：将以下代码添加到页脚的</body>结束标记之前。

<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-notice").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-notice").style.display = "block";
    }
});
</script>

我参与了一些cookie通知主题的开发。

您可以使用themes对其进行另一种查看。