News

18th August 2015 by aegeuana_sjp_admin

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:
[code language=”javascript”]
> document.cookie;
< "_ga=GA1.3.1553413630.1439396997"
[/code]
If we would like to add new cookie, in that case named `dismissed` and with value 0:
[code language=”javascript”]
> document.cookie = "dismissed=0";
> document.cookie;
< "dismissed=0; _ga=GA1.3.1553413630.1439396997; _ga=GA1.3.1553413630.1439396997"
[/code]
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:
[code language=”javascript”]
> document.cookie = ‘dismissed=0; Max-Age=0’
> document.cookie;
< "_ga=GA1.3.1553413630.1439396997"
[/code]
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.
[code language=”javascript”]
// 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’;
[/code]
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:
[code language=”html”]
<div id="disclaimer">
<span id="disclaimer_close">X</span>
<p>This site is using cookies!!!</p>
</div>
[/code]
Javascript snippet:
[code language=”javascript”]
(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;
}
})();
[/code]

Leave a Reply

Your email address will not be published. Required fields are marked *