Nov 19, 2019

cookie consent banner javascript

Accordion to GDPR (General Data Protection Regulation) If we collect or save any kind of website user data, we must acknowledge the user. So if we store cookies on our website visitor's devices we have to tell them about that. If you visit this website for the first time you may see a banner saying "We use cookies in HacksLand" . That's called a cookie consent banner.

hl-cookie-consent-banner

If we use third party services like Adsense, Google analytics, Cloudflare etc. They makes cookies automatically So even we don't make cookies with our web applications, there are some cookies stored in user's devices.

In this document we are going to see how we can make a simple cookie consent banner in JavaScript. There are many plugins and libraries to do this. But hear we are going to write it in pure JavaScript.

It's not nice if we show this banner always because It disturbs our visitors. A simple and user friendly design is always a good point of a website. So we display the banner to a visitor when they visit our site for first time. If he accept the cookie usage we don't display it again.

But how we can know whether a user accepted our cookie usage or not.

Solution is also using a cookie. If user accept to use cookies we save a special cookie on user's browser. So whenever that user visit our site, we know he accepted the cookie usage therefore we don't show the banner again to him.

Lets see our code. First we use setCookie unction to make cookies on user's browser.

function setCookie(cname, cvalue, exdays) {
      var d = new Date();
      d.setTime(d.getTime() + (exdays*24*60*60*1000));
      var expires = "expires="+d.toUTCString();
      document.cookie = cname + "=" + cvalue + "; " + expires;
    }

We supply cookie name, it's value and number of days to expire it. Next we have getCookie function to check cookies and there values.

function getCookie(cname) {
      var name = cname + "=";
      var ca = document.cookie.split(';');

      for(var i=0; i<ca.length; i++) {
        var c = ca[i];
            while (c.charAt(0)==' ') c = c.substring(1);
            if (c.indexOf(name) === 0) return c.substring(name.length,c.length);
          }
          return "";
        }

Now I use following html code to build my cookie consent banner.


<div class="cookie-banner">We use cookies on HacksLand . By visiting, you are agreed to usage of cookies. read more hear.<span id="agree-button">I'm agreed</span>

You can customize above code to match to your design. I used some css styling. If user clicks on "I'm agreed" button , we create a cookie on his device.

Following is the complete code for this process.

function setCookie(cname, cvalue, exdays) {
      var d = new Date();
      d.setTime(d.getTime() + (exdays*24*60*60*1000));
      var expires = "expires="+d.toUTCString();
      document.cookie = cname + "=" + cvalue + "; " + expires;
    }

    function getCookie(cname) {
      var name = cname + "=";
      var ca = document.cookie.split(';');

      for(var i=0; i<ca.length; i++) {
        var c = ca[i];
            while (c.charAt(0)==' ') c = c.substring(1);
            if (c.indexOf(name) === 0) return c.substring(name.length,c.length);
          }
          return "";
        }

if (!getCookie('hl_accept_cookies')) {
  $(document.body).append('<div class="cookie-banner">We use cookies on HacksLand . By visiting, you are agreed to usage of cookies. read more hear.<span id="agree-button">I\'m agreed</div>');
}

You can customize it to match your needs. Hope you enjoyed reading the document.

Aug 12
Loops | Python programming

Looping is an essential part of a programming language. If you want to do a task again and again....

Aug 12
Functions and stack frames

Stack is a concept used in computer architecture to store temporary data. It is used to pass....

Apr 27
Pwnable fd CTF walkthrough

In this document we are going to try a new CTF called file descriptor. This is from pawnable.kr  .....

Replying to 's comment Cancel reply