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

【问题标题】：How to Hide Banner after click and Save with LocalStorage?单击并使用 LocalStorage 保存后如何隐藏横幅？
【发布时间】：2019-04-25 22:06:58
【问题描述】：

我是 Java Script 的新手，在用户点击我的 Cookie 横幅上的接受后，我不知道如何保存信息（本地存储） - 一旦他点击接受，Cookie 横幅就会消失，我会喜欢保存这些信息，所以他不会在转到下一页或重新加载它时再次获得 Cookie Banner。

感谢您提供的任何帮助。

这是我的代码：

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

【问题讨论】：

你试过什么？我在这里没有看到任何使用 localStorage 的尝试

标签： javascript jquery html local-storage banner

【解决方案1】：

使用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 网络文档中阅读有关 localStorage 的更多信息：https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage

【讨论】：

【解决方案2】：

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');
    });
  }
});

【讨论】：