Set Cookie or localStorage for Cookie Banner with JavaScript

Question

I'm working on a Cookie Banner project and I got everything i need exept one thing: - As soon as the User clicks on "Accept" the Cookie Banner disapears and now comes my Problem: I want to set something like a Cookie or localStorage so the User doesnt get annoyed by seeing the Cookie Banner on each Page or after each reload.

I hope you get what I'm trying to say.

Here is my Code:

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

score 3 · Accepted Answer · answered Apr 25 '19 at 15:38

You could refer this link and many others like this

Set cookie and get cookie with JavaScript

or just to simplify your work, do as below

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

Set Cookie or localStorage for Cookie Banner with JavaScript

1 Answers1