JavaScript and Cookies

JavaScript

Cookies have been the subject of a lot of controversy right from the time Netscape incorporated it into it's browser. A cookie is a small piece of information that a web page can store on your machine and retrieve it on your subsequent visits. To protect your privacy, a cookie set by one particular site cannot be accessed by another site. So if you had any plans to surprise your visitors with messages like "I know what you did yesterday blah blah blah...", you can forget it right now.

To learn how to use cookies in Javascript, I went to Netscape's Javascript Guide and found these two functions that I thought were very useful. I have modified it to make it look simpler but the functionality is essentially the same.

<SCRIPT LANGUAGE="Javascript">
                 <!-- Hide from older browsers

// Sets cookie values. Expiration date is optional
                 function setCookie(name, value, expire) 
                 {
                     strCookie = name + "=" + escape(value);
                     if (expire)
                         strCookie += "; expires=" + expire.toGMTString();

document.cookie = strCookie;
                 }

function getCookie(Name) 
                 {
                     var search = Name + "="
                     if (document.cookie.length > 0) { 
                         // if there are any cookies
                         offset = document.cookie.indexOf(search)
                         if (offset != -1) { 
                             // if cookie exists
                             offset += search.length

// set index of beginning of value
                             end = document.cookie.indexOf(";", offset)

// set index of end of cookie value
                             if (end == -1)
                                 end = document.cookie.length

return unescape(document.cookie.substring(offset, end))
                         }
                     }
                 }

// End hiding -->
</SCRIPT>

To use these functions in your page, add the above code between the <HEAD> and </HEAD> tags in your HTML file. But before you start using these functions, it would be a good idea to understand how these functions work.

A cookie basically consists of three pieces of information: a variable name, an associated value and an expiration date. For example, when a person visits your web page, you can have a form asking his/her name and save it as a cookie so that you can greet your visitors by name on their subsequent visits. In this case, you would create a cookie called 'visitor' and assign it the value the user enters in the form and set the expiration date to a few months ahead of the current day. You access cookies by using the document.cookie variable.

document.cookie = "visitor=yoda; expires=Sun, 01-Jan-01 00:00:00 GMT";

The above line will create a cookie called visitor and set it's value to 'yoda' and this cookie will be active till the year 2001. The expires part is actually optional and if it is left out, the cookie you create will expire as soon as the browser window is closed.

The setCookie() function given above does the same this except that it creates the string from the arguments passed and assigns it to document.cookie. The following lines of code will set the same cookie.

expireDate = new Date("January 01, 2000 00:00:00");<BR> setCookie("visitor", "yoda", expireDate);

Of course you don't want to set the name of every visitor as 'yoda' (unless you are a big Star Wars fan). Let us create a form to ask the vistor for his name and use that to set the cookie.

Here is the result. Please enter your name and click the 'Save' button to save your name as a cookie.

Once you save the cookie, the value of document.cookie should have been modified accordingly. To see the value of visitor, click here. This link was coded as

This example is getting pretty long and the complex part is just beginning. Reading a cookie back is not as simple as writing a cookie because if you ask for the value of document.cookie, you will get a formatted string containing all cookies. To see what I mean, take a look at what the following code produces:
alert(document.cookie);

You will see the cookie you set earlier, but you will also see other cookies that this page automatically sets. (These cookies are used by the banners on this page to make sure that the same banner does not get diplayed over and over again). Extracting the value of a particular cookie out of this mess can be tiresome but fortunately we already have the getCookie() function that already does it for us. We already saw above that calling getCookie("visitor") returned the value of the visitor cookie.

See Also:
Cookie Scripts from The Javascript Source
Cookies and Forms from Irt.org
Cookie tips from Webreference

Expiration

META Tags