时间戳

首页 > 解决方案 > 使用 JavaScript 为 Cookie 横幅设置 Cookie 或 localStorage

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

问题描述

我正在做一个 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>

标签： javascriptjqueryhtmlcookieslocal-storage

解决方案

您可以参考此链接和许多其他类似的链接

使用 JavaScript 设置 cookie 和获取 cookie

或者只是为了简化您的工作，请执行以下操作

$(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;
}

推荐阅读