We have now seen how to create, get and delete cookies. Now lets take a look at a previous demo, where we built a business card using frames. This demo will demonstrate saving the business card information in a cookie, retrieving the information from the cookie, then printing the business card on the screen.

1. Save the cookie function

   Notice the buildCard() function has one parameter. This function expects to receive a form object as input. This is so any form can call the function as long as the form contains the same variables.
   
   If we did not pass the entire form as an object then this function would need to know either the form name (and all the forms would need to have unique names) or the form number to access each element on the form. If the form was second one on the page, to get to the field named co:
       company = document.forms[1].co.value
   to avoid knowing the form placement or name, pass the entire form as an object!

   function buildCard(form){
   var company, address, city, state, zip_code, phone_number, busPic, textColor, cardValue
   var cardName="myCard"
   	company = form.co.value;
   	address = form.addr.value;
   	city = form.city.value;
   	state = form.state.value;
   	zip_code = form.zip.value;
   	phone_number = form.phone.value;
   	busPic = form.busType.value;
   	//process the radio buttons
   	for (x=0;x<form.busType.length;x++){
   		if (form.busType[x].checked)
   			busPic = form.busType[x].value;
   	}
   	//process the drop down box
   	for (x=0;x<form.textColor.length;x++){
   		if (form.textColor.options[x].selected)
   			textColor = form.textColor.options[x].text;
   	}
   	//build cookie, seperate each value with a ;
   	cardValue = escape(company + ";" + address + ";" + city + ";" + state + ";" + zip_code + ";" + phone_number + ";" + busPic + ";" + textColor);
   	document.cookie = cardName + "=" + cardValue;
   }
   

2. Get the cookie function.

   This function uses the card name passed in and gets the cookie string associated to that card. If the card name cannot be found it returns null.

   function getCard(cardName){
   	var cardValue = document.cookie;
   	var cardStartsAt = cardValue.indexOf(" " + cardName + "=");
   	if (cardStartsAt == -1)
   		cardStartsAt = cardValue.indexOf(cardName + "=");
   	if (cardStartsAt == -1)
   		cardValue=null;
   	else
   	{
   		cardStartsAt = cardValue.indexOf("=", cardStartsAt)+1;
   		var cardEndsAt = cardValue.indexOf(";",cardStartsAt);
   		if (cardEndsAt == -1){
   			cardEndsAt = cardValue.length;
   		}	
   		cardValue = unescape(cardValue.substring(cardStartsAt,cardEndsAt));
   	}
   	return cardValue;
   } //end function
   

3. Print the cookie function.

   This function takes a cookie string as input. It uses the split method to seperate all the information in the cookie string and places the values into an array. Then the array is used to display the data.

   function printobjCard(cookieString){
   	var cookieArray = cookieString.split(";");
   	document.write("<table class='regText' width=300 border=1><tr>");
   	document.write("<td width=200><span style='FONT-SIZE: 18pt;FONT-WEIGHT: bold;COLOR:" + cookieArray[7] + ";'>" + cookieArray[0] + "</span><br>");
   	document.write(cookieArray[1] + "<br>");
   	document.write(cookieArray[2] + ", ");
   	document.write(cookieArray[3] + ". ");
   	document.write(cookieArray[4] + "<br>");
   	document.writeln("Phone: " + cookieArray[5] + "<br>");
   	document.write("</td>");
   	document.write("<td>");
   	document.write(cookieArray[6] == "sp"?"<img src='/images/character1.gif'>" : cookieArray[6] == "te"? "<img src='/images/character0.gif'>" : "<img src='/images/character2.gif'>");
   	document.write("</td>");
   	document.write("</tr></table>");
   }
   

4. All three functions are in commonfunctions.js and included on the page with the form (display.htm) and the page that displays the business card (displaycard.htm).

5. Click here to see the demo.