Question

我是Java脚本的新手，在用户单击Cookie横幅上的“接受”后，我不知道如何保存信息（本地存储）-当他单击“接受Cookie”后，我会立即消失想要保存此信息，因此他在转到下一页或重新加载时不会再次获得Cookie横幅。

非常感谢您能提供的任何帮助。

这是我的代码：

<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>

Answer 1

localStorage提供了两种方法setItem()和getItem()来设置和检索数据。在页面加载时，您可以检查设置的值并隐藏标语，或者如果尚未设置，请注册点击处理程序。

$(document).ready(function() {
  if (window.localStorage.getItem('cookies-accepted') === '1') {
    $('#CookieBanner').hide();
  } else {
    $("#Accept").click(function() {
      $('#CookieBanner').hide();
      window.localStorage.setItem('cookies-accepted', '1');
    });
  }
});

Answer 2

使用getItem和setItem方法足以解决问题

$(document).ready(function(){
    // Check if the user already accepted it
    if (window.localStorage.getItem('accept_cookies')) {
        $('#CookieBanner').hide();
    }

    $("#Accept").click(function(){
        // Save on LocalStorage
        window.localStorage.setItem('accept_cookies', true);
        $('#CookieBanner').hide();
    }); 
});

您可以在MDN Web文档上了解有关localStorage的更多信息：https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage

单击并使用LocalStorage保存后如何隐藏横幅？

2 个答案: