I'm new to Java Script and I can't figure out how to save the Information (localstorage) after the User clicks on Accept on my Cookie Banner - As soon as he clicks on Accept the Cookie Banner disappears and I would like to save this information, so he doesnt get the Cookie Banner again as soon as he goes to the next page or reloads it.

I'm thankfull for any help you can provide.

Here is my code:

<script src=".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>

I'm new to Java Script and I can't figure out how to save the Information (localstorage) after the User clicks on Accept on my Cookie Banner - As soon as he clicks on Accept the Cookie Banner disappears and I would like to save this information, so he doesnt get the Cookie Banner again as soon as he goes to the next page or reloads it.

I'm thankfull for any help you can provide.

Here is my code:

<script src="https://ajax.googleapis./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>

• javascript
• jquery
• html
• local-storage
• banner

• What have you tried? I do not see any attempt here to use localStorage – Taplar Commented Apr 25, 2019 at 22:08

2 Answers 2

Using getItem and setItem methods is enough to solve it

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

You can read more about localStorage on MDN web docs: https://developer.mozilla/en-US/docs/Web/API/Window/localStorage

localStorage provides the two methods setItem() and getItem() to set and retrieve data. On page load, you can check for the value you set and hide the banner, or if it has not been set yet, register your click handler.

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