cookie consent banner javascript

HacksLand | The computer science playground

Posted by Thilan Dissanayaka on Nov 19, 2019

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.

Hi, I'm Thilan. An engineering student from SriLanka. I love to code with Python, JavaScript PHP and C.

Also read

Sep 23
PUSH and POP with stack

This is the second tutorial of our stack tutorial set. Hear we are going to talk about some two....

Aug 12
What is a cookie?

If you are working with web applications you may have heard about cookies. Also when we browsing....

Aug 12
Functions and stack frames

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

Comments