我知道,有一个第三方解决方案的语气符合cookie欧盟指令。但我想学习如何自己做。我想要以下内容:当用户点击“接受”时,将记住整个浏览会话的选择。目前,每次刷新页面时都会显示该消息。谢谢,
//shows cookie message
$(document).ready(function(){
$(".cookie").toggleClass("cookieDisplayed");
//hides cookie message
$(".acceptCookies").on("click", function(){
$(".cookie").removeClass("cookieDisplayed");
});
});
.cookie {
padding:20px;
font-size:80%;
width:100%;
height:150px;
background:#F55D2D;
color:white;
position:relative;
top:-150px;
transition: top 1.5s;
-webkit-transition: top 1.5s;
-moz-transition: top 1.5s;
}
.cookie button{
margin-left:20px;
position:relative;
left:100px;
background:white;
color:#F55D2D;
border: 0;
border-radius:4px;
}
.cookie button:hover {
background:#F89576;
color:white;
}
.cookie button a {
text-decoration:none;
color:#F55D2D;
}
.cookie.cookieDisplayed {
top:0;
}
<html>
<header>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
</header>
<body>
<div class="cookie">
<p>We are using cookies to give you the best experience on our site. Cookies are files stored in your browser and are used by most websites to help personalise your web experience.</p>
<p>By continuing to use our website without changing the settings, you are agreeing to our use of cookies.</p>
<button><a href="aboutus.html">More information</a></button>
<button class="acceptCookies">Accept</button>
</div>
</body>
</html>
答案 0 :(得分:3)
您对该元素的javascript更改将不会在重新加载时保留
具有讽刺意味的是,处理这种情况的最佳方法是使用cookie。
抱歉:我对“我需要一张饼干才能确认一张饼干”太可爱了。
localStorage是正确的答案。概念上(和合法地在欧盟)cookie和localStorage是相似的。两者都在用户的机器上存储一个值 - 在这种情况下他们接受了cookie通知 - 并且即使用户关闭浏览器也都会持续存在。
两者之间存在差异。 Cookie来自互联网的早期阶段,现在用于谈论服务器。 localStorage更适合与客户交谈。要么可以在这种情况下工作(但本地存储将更容易)。
sessionStorage仅在用户关闭浏览器之前一直存在。