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

Oct 17
Command line arguments in C

Hi guys, In this document we are going to see how we can use command line argumentsin C programs .....

Apr 16
Wordpress nulled theme checker

We all love free stuff. So many people try to install premium themes and plugins on there WordPress....

Aug 12
Printing | Python programming

Printing is an absolutely basic part of a programming language. We learned how we can print a....

Comments