Erm's I.T. Girl – Zelna Ellis

Don't fear when Zel is near…

Demistify Cookies in Javascript Coding

Firstly, what is a cookie?

Cookies has been invented by Netscape. It used to remember stuff.  It saves certain settings, etc., because the web server can not do it on its own. So when you request a certain page and the cookie is saved, the server can use the cookie to recall these settings, etc.

How does a cookie work?

A cookie is a small text file saved by your browser.

It contains some of the following data:

  1. A name-value that contains the actual data.
  2. An expiry date.
  3. The full  path to the server, incl. the domain, where it get sends to.

So everytime you request a page from a server to which the cookie must be send to, it is added to the HTTP header. Server side programs can then access this info. Luckily nowadays you can also manage the cookies and be able to delete it from “bad sites”.

Name-value

Each cookie has a name-value that contains the actual data/information. With your scripts you can search for the values and retrieve the data.

Expirty Date

Each cookie has an exprity date after it will become absolute. If you don’t specify an expiry date it will be erased after the browser is closed. It should be in the Greenwich (UCT) format created by the Date.toGMTString() method.

Domain and Path

The domain tells the browser to which domain the cookie should be sent to. If you don’t specify it, it becomes the domain of the page that sets the cookie. The domain also allows cookies to access sub-domains.  The path is the directory in which the cookie will be active in.

Javascript & Cookies

Cookies can be created, read and erased by JavaScript.

Create a cookie

document.cookie =  mycookie1=testcookie; expires=Thu, 2 Aug 2001 20:47:11 UTC; path=/

The syntax:

  1. The name-value pair (mycookie1=testcookie)
  2. Then a semicolon and a space
  3. Then the expiry date in the correct format (expires= Mon, 2 Mar 2009 16:22:13 UTC)
  4. Then a semicolon and a space
  5. Then the path (path=/)

Do not change the syntax!

Read a cookie

To be able to read a cookie the document.cookie value must be treated as a string value.  You will search for the cookie name and the value. I will explain this a bit later on with the scripts.

Erase a cookie

This is quite simple. You set the expiry date to a date in the past.

The Three Scripts

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 nameOfCookie = name + “=”;
var cookieArray = document.cookie.split(‘;’);
for(var i=0;i < cookieArray.length;i++) {
var c = cookieArray[i];
while (c.charAt(0)==’ ‘) c = c.substring(1,c.length);
if (c.indexOf(nameOfCookie) == 0) return c.substring(nameOfCookie.length,c.length);
}
return null;
}

function eraseCookie(name) {
createCookie(name,””,-1);
}

Explaining the scripts

createCookie

In this case you use 3 parameters:

  1. The name of the cookie
  2. The value of the cookie
  3. The number of days the cookie will be active

Inside the function, it get’s the current date  and add the number of days to it and set the value to it. This is in milliseconds.

Then it sets the value of expires to this value in the GMT format required by cookies.

Note: If the value of 0 (zero) is passed as the number of days the cookie will expire when the browser is closed.
It also sets the name and value of the cookie.
Finally it writes the cookie.

readCookie

The only parameter here is name – the name of the cookie. It will checks that it contains a value and if it doesn’t it will return a null value which are going to upset the rest of the function.

Variable nameOfCookie is going to search for the name of the cookie, followed by an =

The variable cookieArray is an array containing all cookies that are set for this domain and path. Note on document.cookie.split(‘;’) – Remember in the syntax the semicolon is used between the name-value, expiry date and domain & path.

Then it goes through all the cookies and sets the variable ‘c’ for the cookie to be checked. If the first character is a space it removes it by using the substring function to remove it and eventually we get to the name of the cookie.

If it has found the cookie ‘if (c.indexOf(nameOfCookie) == 0)’  it will return the value of the cookie ‘return c.substring(nameOfCookie.length,c.length)’.

If it has gone trhough all the cookies but could not find it , the function will return a null value.

Mission accompished!

eraseCookie

Only parameter here is the name of the cookie.

This function calls create a cookie but set the date to one day ago. The browser sees that the cookie has expired and discard it.

BTW, my favourite cookie is a lot of the choc-chip cookie!!!🙂

25 February 2009 - Posted by | Javascript | , ,

No comments yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: