JavaScript Cookies

A cookie is nothing but a small text file that's stored in your browser. It contains :

1. A name-value pair containing the actual data
2. An expiry date after which it is no longer valid
3. The domain and path of the server it should be sent to.

As soon as you request a page from a server to which a cookie should be sent, the cookie is added to the HTTP header. Server side programs can then read out the information and decide that you have the right to view the page you requested or that you want your links to be yellow on a green background.

So every time you visit the site the cookie comes from, information about you is available. This is very nice sometimes, at other times it may somewhat endanger your privacy. Fortunately more and more browsers give you the opportunity to manage your cookies (deleting the one from the big ad site, for example).

Cookies can be read by JavaScript too. They're mostly used for storing user preferences.

name-value

Each cookie has a name-value pair that contains the actual information. The name of the cookie is for your benefit, you will search for this name when reading out the cookie information.

Expiry date

Each cookie has an expiry date after which it is trashed. If you don't specify the expiry date the cookie is trashed when you close the browser.

Domain and path

Each cookie also has a domain and a path. The domain tells the browser to which domain the cookie should be sent. If you don't specify it, it becomes the domain of the page that sets the cookie, in the case of this page www.inavi.in.
Please note that the purpose of the domain is to allow cookies to cross sub-domains. My cookie will not be read by blog.inavi.in because its domain is www.inavi.in . When I set the domain to inavi.in, the search sub-domain may also read the cookie.

document.cookie

create a cookie 

Cookies can be created, read and erased by JavaScript. They are accessible through the property document.cookie.

document.cookie="name=Navdeep; expires=Tue, 21 Jan 2014 12:00:00 UTC";

1. First the name-value pair ('name=navdeep')
2. then a semicolon and a space
3. then the expiry date in the correct format ('expires=Tue, 21 Jan 2014 12:00:00 UTC')
4. again a semicolon and a space
5. then the path (path=/)

read a cookie 

var x = document.cookie;

document.cookie will return all cookies in one string much like: cookie1=value; cookie2=value; cookie3=value;

Change a cookie

document.cookie="name=Sharma; expires=Thu, 18 Dec 2013 12:00:00 UTC; path=/";

Delete a cookie 

document.cookie = "name=; expires=Thu, 01 Jan 1970 00:00:00 UTC";

The scripts

Theses scripts provide the effective way of dealing with cookies.

function createCookie(name,value,days) {
 if (days) {
  var date = new Date();
  date.setTime(date.getTime()+(days*24*60*60*1000));
  var expires = "; expires="+date.toGMTString();
 }
 else var expires = "";
 document.cookie = name+"="+value+expires+"; path=/";
}


function readCookie(name) {
 var nameEQ = name + "=";
 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,c.length);
  if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
 }
 return null;
}

function deleteCookie(name) {
 createCookie(name,"",-1);
}

create cookie: 

This function takes name,value and number of days as arguments and create cookie with that.If you set the number of days to 0 the cookie is trashed when the user closes the browser. If you set the days to a negative number the cookie is trashed immediately. e.g.

createCookie('name','Navdeep',2);

read cookie:

This function takes the key and return you the value already set in cookie.

var name = readCookie('name')
if (name) {
 [do something with x]
}

delete cookie:

This function simply erase the cookie with they provided key.

deleteCookie('name');

Thank you.