Home Page

Cookie Setting Function

Overview: This function has been inserted in the index.html (home) page to set a session cookie for the current web page domain with the details of the visitor's favourite pans to be used in the wish list or for storing the text resizing preference. The page also includes some additional functionality to display the contents of the set cookies for debugging purposes.

The function SetCookie(), with two parameters, is inserted into the head of the page. The parameters for the function are: the name of the cookie to be set and the data string to be stored in the cookie. The value of the cookie data string (value) is escaped inside the function prior to storing it in the cookie so that it may contain any characters desired. This is necessary as certain characters (spaces, commas, etc) have special meanings in the construction of cookies. If the cookie value is retrieved later, the cookie data value will have to be unescaped before being used. The cookie set, because the function does not include any instructions to the contrary, will only be good for the current browser session and will be accessible to all pages on the current domain.

The function SetCookie():

// function to update/create a new session cookie for 
// the current domain, where the name of the cookie 
// is 'name' and the data stored in the cookie is in 
// the 'value'
function SetCookie(name, value) {
	// set the cookie with escaped value.
	document.cookie = name + "=" + escape(value);
}

Defining the initial 'wishlist' cookie value:

	
// define the cookie contents for the wishlist
var cookieString = 'copperfry=20 inch copper pan:prodblank,' + 
	'greenfry=20 inch green pan:prodblank,' + 
	'silverfry=20 inch silver pan with cover:product1,' +
	'redfry=20 inch red pan:prodblank';

Calling SetCookie() on page load:

<body onload="SetCookie('wishlist',cookieString);">

In the body of the page a call is made to set a session cookie called 'wishlist' (the first parameter in the SetCookie() function call) with value of copperfry=20 inch copper pan:prodblank,greenfry=20 inch green pan:prodblank,silverfry=20 inch silver pan:product1,redfry=20 inch red pan with cover:prodblank (the second parameter). This data string is stored in a previously declared variable named "cookieString" found also in the head of the page. The call to set the cookie is made whenever the page has finished loading completely using an onload event handler in the body element. This particular cookie is to be retrieved on the 'wishlist.html' page and used to display a list of items and their pictures that the customer has previously asked to be added to a wish list.

Cookie debugging code:

if (document.cookie) {
	document.write("The following cookie string is available " + 
		" for this page: " + 
		unescape(document.cookie));
} else {
	document.write("There either are no cookies or the " + 
		"cookie was just set. " + 
		"Try reloading the page to see cookies.");
}

Finally, this page has some code to display the contents of all cookies available for the web site to be used for debugging purposes. In the above, it first checks to see if the document.cookie exists and has some kind of content (any content). If it does, then it displays the unescaped contents of the document.cookie string. Otherwise, it tells you that the cookie is missing or was just set. This particular functionality would not be included in the end site.

Credits/Modifications: The SetCookie() function is based on code from http://www.nicksScripts.open.ac/cookie.html but the script found there does not escape the cookie value which I added to handle all cookie values safely. Without this change some values would be illegal and not stored correctly or possibly at all. The remaining code was written by me, based on general information from Study Guides 7 and 8.

Return to top

Next Script Name.......

Next script description......

Return to top