<%response.buffer=true%> <% yere = year(date()) Response.Expires = 0 %> JavaScript Intro
<State Maintenance >


Cookies Defined: In simple terms, a cookie is a string of data that is stored on the client's hard drive when a user visits a web page. This data is used to store information about the user for later use by the developer. Cookies were invented fairly early in the web's history as a way to track users on a site, and bring a form of "state maintenance " to pages. Cookies have a reputation for being a security risk, but most of the problems are due to ineffective programming on the part of web developers.

State Maintenance: One of the key issues facing web developers is the web is considered an inherently "stateless" environment. This means that every time a user hits a page, there is no built in mechanism for knowing if this is the first time the user has ever arrived, or if they are in fact there to finish filling out data to make a purchase.

State maintenance is the challenge of maintaining exactly which customer is which, and at what state they are in any particular process. We need to know if a person has just arrived at our site, or is checking out after making a purchase. The developer can store data in "cookies" and retrieve the data put there with code to determine if the user is making a return trip to the website, etc.

Where Is the Data?: Cookies store "strings" of data in temporary folders on the user's machine. As such, it carries the advantage of allowing the user to bear part of the burden of storing their own data, regarding their own transactions. Cookies have a maximum individual size limitation of 4K, so we need to be careful with the amount and type of info we want to store there.

To look at your cookies in Windows XP (As stored by Internet Explorer) use Explorer to go to:


Amongst the cached images and files, you will see cookies that are text files and look like this:

Cookie:william newman@amazon.co.uk/

For this particular cookie, here was the text inside:

ubid-acbuk 432-5803069-7720368 amazon.co.uk/ 1024 2679150208 31961202 1907843600 29556525 *

Note that the info in this cookie is obscured, if not downright encrypted.

Since cookies are obviously visible on a user's machine, it would be entirely inappropriate to store credit card or other sensitive data in this way. We however, can use cookies to store data that is meaningless to the user, or not inherently sensitive in cookies. Frequently multiple users access the same machine, and would have access to data in the cookie.

Cookies can be stored for any length of time, for an hour, a day or even years! Many users choose to delete their cookies at intervals, or even to have the browser refuse to store them at all.

Testing For Cookie Capability: Since some users turn off cookies with their browsers, if a website is designed to use cookies in any critical way, we will need a way to inform the user.

To test the browser, first try the link below called "cookieTest" and see the message. Then disable cookies, and try again. cookieTest.htm

Once you have done that, change your cookie preference to "prompt" (see above) and see what happens. The cookie we write is called "temp" and the string of text that is writes to your machine is "temp".

Server Vs. Client Cookies: Using cookies to store data can be done with client side code with JavaScript, or on the server with PHP, ASP, etc. The cookies thus created are visible in either language simultaneously, to the domain that created the cookie! Cookies are designed to be read by the one domain that created them. There are tricky ways to get around this built in limitation however, so storing compromising data in cookies is never advised.

Creating Cookies With JavaScript: In JavaScript, cookies are easily built using the document.cookie object. Name/value pairs are added to a cookie "array", separated by an equal sign, and terminated with a semi-colon to separate each cookie:

document.cookie = cookieName + "=" + cookieValue + ";";

Cookies created in this manner will be deleted the moment the browser window closes. Cookies with such a short "shelf life" are sometimes called "session" cookies. To allow cookies to exist on the client machine for a longer period of time, we can also set an expiration date to some date in the future. Below we are using the date object to set an expiration date 6 months from now to add to our cookie:

myDate = new Date();
myDate.setMonth(myDate.getMonth()+6); //6 months from now
myDate = " expires=" + myDate.toGMTString() + ";";

document.cookie = cookieName + "=" + cookieValue + ";" + myDate;

Reading Cookies: The entire cookie "string" of all cookie name/values can be read by using the "toString()" method of the document.cookie object:


While this is fine for a "quick peek", to view raw cookie data, for individual handling we will need to "split" the string, technically twice. First on the "; " between cookies, then on the "=" between the name/value pairs:

thisCookie = document.cookie.split("; ");
    rawCookies += 'Cookie Name:' + thisCookie[x].split('=')[0] + ' '; //zero is left of equals, i.e. name
    rawCookies += 'Cookie Value:' + thisCookie[x].split('=')[1] + '\n '; //one is right of equals, i.e. value

This will display the name/value pairs of all current cookies (assuming some are present) into an alert box.

Deleting Cookies: Cookies are best deleted by setting an expiration date on an existing cookie into the past. Once the expiration date is past, the browser will delete the cookie. It is also a safe idea to set the value to an empty string, at the same time, just in case:

myDate = new Date();
myDate.setMonth(myDate.getMonth()-6); //6 months in past!
myDate = " expires=" + myDate.toGMTString() + ";";

document.cookie = cookieName + "=; " + myDate; //value removed, date in past

A JavaScript Cookie Toolpage : Here is a demo page that allows a user to view all current cookies, and create and delete cookies for testing purposes. You can use this when working with your pages that create cookies: makeCookie.htm

Using Cookies With JavaScript: One nice thing to store in cookies with JavaScript are user preferences. If you allow a user to store a preference in a cookie, (say for instance the name of a stylesheet) if the user returns, the cookie will tell the browser which stylesheet to use, for any user who returns to this page from this browser. You could also set a local Time Zone from the system clock, etc.

Print this Page Back To Top

2000- <%=yere%> newMANIC INC, All rights reserved