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

【问题标题】：Set Cookie or localStorage for Cookie Banner with JavaScript使用 JavaScript 为 Cookie 横幅设置 Cookie 或 localStorage
【发布时间】：2019-09-15 02:05:57
【问题描述】：

我正在做一个 Cookie 横幅项目，我得到了我需要的一切，除了一件事： - 一旦用户点击“接受”，Cookie 横幅就会消失，现在我的问题来了：我想设置类似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>

【问题讨论】：

标签： javascript jquery html cookies local-storage

【解决方案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;
}

【讨论】：