18 - Cookies in Javascript

Javascript has made a lot of programming possible on the client side of the connection. This has reduced a lot of burden on the server as well as the network. Now here is a delicious chapter on cookies and how Javascript can use them.

What are cookies?

A cookie is a file containing name value pair and is stored in the browser. It can be of the size 4kb or less.

What purpose do they serve?

Every time a browser requests a page it is considered as a fresh request. The web server does not have any facility inbuilt to remember the user. So, whether the browser views the page for the first time or the second time or the hundredth time or the ten millionth time it would not make a difference. So, what if we want to make a difference? Then we use cookies. Well, now technology has advanced and HTML 5 has many ways. But, even today many websites are using cookies.

The cookie is stored in the browser. When the user visits the domain for which the cookie(s) is/are intended the page can be customised for the viewer and then sent to the browser or values can be set by the browser and then displayed to the user.

So, one can infer that the cookies can be used to store little bits of information in the browser and can be used when needed before it expires.

Parts of a cookie

A cookie has three parts.

· The name/key-value pair: This pair is made of two parts, name/key and value. The name/key helps identify the cookie. The value contains the actual information stored against the name/key.

· Expiry date: This is a date value which specifies when the cookie would expire. If the date is not specified then the cookies will be deleted when the browser gets closed. If not then the cookie continues to live until its expiry date. The date format to be followed is UTC/GMT.

· The domain and path: This specifies the domain and the path which denote that when the browser requests pages from this path and domain the cookies are to be sent to it. The domain and path have to be the ones in which the cookies had been created. One cannot set the cookies for another domain. The path value defaults to ‘/’ which means that all the paths for the domain can access the cookies. If the domain is unspecified then the cookies are assumed to have been set for the particular page which created it.

Here are some examples for cookies.

Cookie 1

VisitorName=XYZ; expires= Wed, 24 Sep 2014 20:47:11 UTC; path= ‘/market-views/supermarket.com’

In this cookie the VistorName is the key with which the cookie can be identified. Well, the expiry date is evident here. The domain and the path says that pages that are requested from the path market-views folder in the supermarket.com are to be sent this cookie.

Cookie 2

LastVisit= Fri, 12 Sep 2011 03:27:15 UTC; expires= Mon,04 Mar 2017 04:05:20 UTC; path=’www.supermarket.com’

This cookie is sent to the page that has the domain name www.supermarket.com. If we change the path attribute to ‘/supermarket.com’ then all the pages under the domain along with sub domain supermarket.com are sent the cookies.

Creating cookies with Javascript

One can create a cookie with the document object in Javascript. One uses it just like an ordinary string variable but there is a difference to it. Here is how we can create a cookie.

    document.cookie = ‘LastVisit= Fri, 12 Sep 2011 03:27:15 UTC; expires= Mon,04 Mar 2017 04:05:20 UTC; path=’www.supermarket.com’

Now this would create and set the cookie from the page. Now how do we create another cookie? Well, as below.

    document.cookie = VisitorName=XYZ; expires= Wed, 24 Sep 2014 20:47:11 UTC; path= ‘/market-views/supermarket.com’

Here the document.cookie is not rewritten with the second statement. Another cookie is created from this. The cookie will be rewritten only if the name/key is repeated.

Retrieving cookies with Javascript

The method getCookie(name/key) can help retrieve the value for a particular cookie.

    greetingDiv.innerHTML = “Hello” + getCookie(“VisitorName”) + “!”;

Deleting a cookie

This is simple. All one has to do is set the value to empty and set the expiration date to -1. Then the cookie will be deleted when the browser exits.

Like us on Facebook