JavaScript - SPLessons

Javascript Cookies

Chapter 15

SPLessons 5 Steps, 3 Clicks
5 Steps - 3 Clicks

Javascript Cookies

Javascript Cookies

Why Cookies?

shape Introduction

Web applications work on HTTP protocol, a stateless protocol i.e once the web server processes a request for a web page, the web server will not remember anything about the client who has made the request.

For example, consider a drop-down list with 3 background colors-red, green and blue. Select a red color and open a new tab and visit the same page. Now, the background of the page should be in red color. But, it will not appear as expected because the page does not remember the color that was selected previously.

So, to overcome this and make a web application remember the settings, cookies are used.

What are Cookies?

shape Description

Javascript Cookies are the small text files that are stored in the browser of visitor’s computer. Cookies help the server to quickly access the information of users who visit the same pages again and again. It can be a string of name-value pairs separated by semi-colons.

Working with Javascript Cookies

shape Description

In JavaScript, document.cookie property is used to create, read, change and delete cookies. There are 3 options while creating Javascript Cookies.

Name-value

First thing is a name-value.

Syntax for name-value cookie is :

document.cookie=”username=Mike Hussey”;

Expire Date

Second thing is Expiration date, which allows a cookie to stay on the user’s computer. When a user closes the browser, cookies will be deleted automatically.

Syntax for adding the expiration date to a basic single cookie is :

document.cookie = “username=Mike Hussey; expires = Fri,14 Nov 2017 12:00:00 GMT”;

Path-name

Third option is assigning a specific path name to a cookie. This is helpful when a page on the site to which the user returns is known.

Syntax for adding a pathname to a cookie is as follows:

document.cookie = “username=Mike Hussey; expires = Fri,14 Nov 2014 12:00:00 GMT; path=/”;

The document.cookie property will return cookies in a single string. For example,

cookie1 = value; cookie2 = value; and so on.

shape Description

To read a Cookie, the syntax is as follows:
var x = document.cookie;

To change a cookie, the above syntax can be used.

To delete a cookie, you need not specify a value. Users need to set the expiration parameter to a date that has been passed. The syntax is as follows:

document.cookie = “username = ; expires = Mon, 01 Jan 1985 00:00:00 GMT”;

shape Description

document.cookie looks like a text string but it is not.

When writing to document.cookie property, cookie string is created i.e. when writing the entire string to a property, only the name-value pair of cookie string will be visible when the cookie is read.

New cookies are added to document.cookie property and the property is read by the new string. Following is the syntax:

cookie1= value; cookie2=value; cookie3=value

shape Description

To write a value to a cookie, a function has to be written so that it searches only the specific value in a cookie string. For this purpose, JavaScript has 3 functions, they are:

  1. setCookie
  2. getCookie
  3. checkCookie

setCookie

This function creates/sets a new Cookie and stores the visitor’s name in it.

function setCookie(cname, cvalue, exdays) {
  //declares the value of dt as current date
    var dt = new Date();
    dt.setTime(dt.getTime() + (exdays*24*60*60*1000));
    var expires = "expires="+dt.toUTCString();
    document.cookie = cname + "=" + cvalue + "; " + expires;
}

The above function contains 3 value names: cookie name, cookie value and expiration date.

getCookie

Using this function, the value of specified cookie can be returned.

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 "";
}

checkCookie

This function verifies whether the cookie is set or not.

function checkCookie() {
    var username=getCookie("username");
    if (username!="") {
        alert("Welcome again " + username);
    }else{
        username = prompt("Please enter your name:", "");
        if (username != "" && username != null) {
            setCookie("username", username, 365);
        }
    }
}

The above example checks if the cookie is set or not. If the cookie is set, the greeting will be displayed, otherwise, a prompt box opens asking for the username. After giving, the username will be stored for 365 days.

Summary

shape Key Points

  • Javascript Cookies help the server to quickly access the user information who visit the same page over and over.
  • Javascript Cookies is created with a name-value pair.
  • setCookie,getCookie and checkCookie are the two functions in JavaScript cookies.