使用JavaScript为Cookie横幅设置Cookie或localStorage

时间:2019-04-25 15:19:33

标签: javascript jquery html cookies local-storage

我正在研究Cookie Banner项目,我得到了我需要的所有东西:-用户单击“接受”后,Cookie Banner消失了,现在出现了我的问题:我想设置一个Cookie或localStorage,这样用户就不会在每个页面上或每次重新加载后都看到Cookie标语而感到烦恼。

我希望你能明白我的意思。

这是我的代码:

<DOCTYPE html>

<html>
<head>
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
		<script>
			$(document).ready(function(){
				$("#Accept").click(function(){
				$('#CookieBanner').hide();
				});
			});
		</script>
		
		<div id="CookieBanner">
		 	<div class="agj">
				<div class="agj-content">
					<div class="initial-info">
						<h2 class="title">Privacy</h2>
						
						<p class="message">
							This website uses cookies to provide you with the best possible service and website functionality, and to provide social media features and analyse the traffic to our website. If you continue to use our website, you agree to our using cookies.
						</p>
						
					</div>
					<div class="buttons">
					<button id="Accept">Accept</button>
					<a class="link" href="#" title="Get more Information about Cookies and how we use them">Show Purposes</a>
					</div>
				</div>
			</div>
		</div>
<!--- here I would like to set a JavaSript Cookie or localStorage so the User doesnt get the Banner after clicking Accept again --->

 </head>

1 个答案:

答案 0 :(得分:1)

您可以引用此链接以及许多其他类似链接

Set cookie and get cookie with JavaScript

或者只是为了简化工作,请按照以下步骤

$(document).ready(function(){
  var getCookieAccept;

  getCookieAccept = getCookie("cookiepolicy");
  if(getCookieAccept != "accept"){
      $('#CookieBanner').show();
  }

  $("#Accept").click(function(){
    $('#CookieBanner').hide();
    var expire=new Date();
    //Setting cookie expiry after 6 months 
    expire=new Date(expire.getTime()+15552000000);
    document.cookie="cookiepolicy=accept; expires="+expire;
  });
});

CSS

#CookieBanner{
  display: none;
}