Software
18th August 2015 | By:

Implement cookies disclaimer in Javascript

If you don’t know exactly what cookies are please take a look in Introduction to cookies in our blog.

The full example can be found here on JsFiddle. Please note, when you dismiss the notification it won’t be visible until you remove the cookie.

It is now a legal requirement in Europe to notify the users when a website is using cookies to store information, a lot of websites started integrating a small disclaimer, we will be discussing a simple integration which allows the users to dismiss the given disclaimer and only see it once.

Ironically enough this task can be easily accomplished by using nothing else than cookies. Cookies can be created, updated or deleted either by backend or frontend. In this tutorial we will be covering a simple implementation using the frontend.

First, let’s see the basics of the cookies using JavaScript.

To display all existing cookies on the website:

> document.cookie;
< "_ga=GA1.3.1553413630.1439396997"

If we would like to add new cookie, in that case named `dismissed` and with value 0:

> document.cookie = "dismissed=0";
> document.cookie;
< "dismissed=0; _ga=GA1.3.1553413630.1439396997; _ga=GA1.3.1553413630.1439396997"

To delete the cookie we need to setup the `Max-age` of the given cookie to 0 and it will be deleted automatically by the browser:

> document.cookie = 'dismissed=0; Max-Age=0'
> document.cookie;
< "_ga=GA1.3.1553413630.1439396997"

By default the cookie expires after the browser is closed, this can be overwritten manually by setting `expires` or ‘Max-age’ for the given cookie. The difference between these two is that `expires` sets the date after which the cookie will be deleted and `Max-age` specifies the age of cookie in seconds after which cookie will be deleted from browser.

// cookie will be deleted after 10 seconds
> document.cookie = 'dismissed=1; Max-age=10';

// cookie will be deleted at the given date/time
> document.cookie = 'dismissed=1; expires=Thu, 20 Dec 2015 14:00:00 UTC';

That’s the basics we need to know to in order to implement a closable cookie disclaimer.

Next is to create a html element with notification and implement a small JavaScript snippet to hide the element and set the cookie with quite long expiration date as there is no possibility to set up non expirable cookie.

HTML template:

<div id="disclaimer">
    <span id="disclaimer_close">X</span>
    <p>This site is using cookies!!!</p>
</div>

Javascript snippet:

(function(){
    var disclaimer = document.getElementById('disclaimer');
    var disclaimer_close = document.getElementById('disclaimer_close');
    var dismiss_cookie_name = 'dismissed';
    // 10 years in seconds (60*60*24*365*10)
    var dismiss_cookie = dismiss_cookie_name + '=1; Max-age=315360000';

    if(document.cookie.indexOf(dismiss_cookie_name) == -1){
        disclaimer.style.display = 'block';
    }else{
        disclaimer.style.display = 'none';
    }

    disclaimer_close.onclick = function(ev){
        disclaimer.style.display = 'none';
        document.cookie = dismiss_cookie;
    }
})();
Tags: , , , , ,

Leave a reply

Your email address will not be published. Not now, not ever. Required fields are marked *

Comments


You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Name
Email
Website