Tutorial 13 - Cookies

Cookies are used for information storage that can be read either by the same page on a later viewing, other XHTML or JavaScript pages on the same site or by servers. Some of the many uses of cookies are: tracking visits by a specific client, remembering the last page viewed, shopping basket storage, notifying a user of any recent change to site, user profiling, login, viewing method, preferences, passing data from one document to another and maintaining state information longer than a single session.

Ingredients

Baking a Cookie
Eating a Cookie

Saving a User Preference
Saving a User 'Agreement'

Required Cookie Ingredients

Certain ingredients are required for the correct baking of a cookie from scratch. The following section of this page provides a function that sets reasonable defaults for most applications. But these ingredients can be added as baking parameters if needed by a specialized application.

Name: Used as a unique identifier as each website only has one cookie but it can have many name variables for different purposes. Name variables can't contain semicolon, comma or space. Well behaved calls will verify that a name to be baked does not have any of these characters.
Value: The data that is to be saved.
Expires: Last date that the cookie value is valid for. The date format is DD-Mon-YY HH:MM:SS UTC. The data is not necessarily removed from the file but it is inaccessible from JavaScript. Defaults to 'current session'.
Note: MSIE expires after the date, gecko expires on the date.
Path: Restricts cookie to specific level of a site. Defaults to the level that made the cookie.
Domain: Site specification to restrict access to cookies. Defaults to current domain.
Secure: If set to 'true', the cookie responds only to a 'secure' server. Defaults to 'false'

Note: MSIE stores cookies in \windows\cookies and gecko browsers store cookies in a cookies.txt file. This is the cookie tray which can only be removed from the browser, not a program.

Baking a Cookie

bakeCookie is a generic function for creating cookies. The parameter order is (name, value, expiryLength, path, domain, security). Name and value are mandatory and optional parameters default to useful values. Expiry is in number of days! To tossCookie or remove it from the tray, enter a negative expiryLength! Many cookies can be stored on the same tray by calling the bakeCookie function several times with different variable names.

function bakeCookie(name,value){
  args=arguments;argc=args.length;
  expires=(argc>2) ? args[2] : null;
  path=(argc>3) ? args[3] : null;
  domain=(argc>4) ? args[4] : null;
  secure=(argc>5) ? args[5] : false;
  expDate=new Date();day=24*60*60*1000;
  if(expires){expDate.setTime(expDate.getTime()+expires*day);}
  document.cookie=name+"="+escape(value)+
    ((expires===null) ? "" : (";expires="+expDate.toUTCString()))+
    ((path===null) ? "" : (";path="+path))+
    ((domain===null) ? "" : ("; domain="+domain))+
    ((secure===true) ? ";secure" : "");
}

Eating a Cookie

eatCookie is a generic function that recovers stored cookie information. The only required parameter is the variable name. The returned value is a string value or null if nothing was stored in that variable.

function eatCookieVal(name){
  endstr=document.cookie.indexOf(";",name);
  if(endstr===-1){endstr=document.cookie.length;}
  return unescape(document.cookie.substring(name,endstr));
}
function eatCookie(name){
  arg=name+"=";alen=arg.length;
  clen=document.cookie.length;i=0;
  while(i<clen){
    j=i+alen;
    if(document.cookie.substring(i,j)===arg){
      return eatCookieVal(j);
      }
    i=document.cookie.indexOf(" ",i)+1;
    if(i===0){break;}
  }
}

Example: Saving a User Preference

A common use of cookies is saving user preferences for reuse. The example uses the newColor2() function from the newColor() function modified with a line that bakes a fresh cookie when the background color is changed. Cookies are used to save the color choice. Returning to the page will reset the color to the last setting selected.

Step 1: Create an interface such as a form for color selection. Dynamic Form Examples has several methods that may be used. Make sure that the element that displays the color has an id attribute.

Step 2: Create a cookie baking function that sets an expiry length and adjusts colors to the new settings

function newColor2(entry,areaID){ // use DOM method
  bakeCookie("colorSet",entry,7); // save for a week
  if (!areaID){areaID="body";} // default to whole body
  document.getElementById(areaID).style.background=entry;
}

Step 3: Create an isColorSet() function that eats the cookie if it is there and calls the color setting function. Call this function with the onload attribute in the body element.

function isColorSet(areaID) { // points at color element
  colorSet=null;
  if(!(colorSet=eatCookie("colorSet"))){colorSet=null;}
  if(colorSet!==null){newColor2(colorSet,areaID);}
}

Step 4: Copy the bakeCookie(), eatCookie(), newColor2() and isColorSet() functions into a script element. Add a call from the color selection form to bake a new cookie with any updates.

Example: Saving a User 'Agreement'

User agreement to site policy statements are common on corporate sites offering copyright material or corporate property on-line. To perform this kind of customer recording, use the following scenario:

Step 1: Create a form on the 'terms' page with the agreement terms text and a button for agreement.

Step 2: Attach the I Agree button to the cookie baker. All that is required is the existence of the 'Iagree' name so its value can be 'anything'. Be sure to set an expiryLength, otherwise the cookie only lasts for the browser session!

Step 3: If needed, add a routine to the 'baker' function that submits the form as a mailto service or to a mail server.

Step 4: Add an isAgree() function to the agreement terms page. It 'eats' the cookie and if 'Iagree' name is found, the 'agreement form' is hidden and the link to the agreement required page is shown.

Note: Use CSS visibility to hide/show the agreement form and activate button elements.

Step 5: Add an onload argument for 'isAgree' to the 'agreement required' page(s) so that correct elements are hidden and shown on every visit to this page.

Step 6: Modify the isAgree() function to trap and redirect the user back to the 'agreement form' if the 'Iagree' name is missing. Add this function to each of the 'agreement required' pages.

And here is a demo of the agreement page utility:

Access the 'special' page

Here are the totally unreasonable
terms to viewing/using the sample page.
1] You will live in abject poverty.
2] You will remain celibate.
3] You will send all your worldly
   goods to page owner.
4] You will honour and revere the page owner.

JR's HomePage | Comments [jstutord.htm:2010 01 22]