Code snippet page

<!-- JavaScript:Cookies code snippet 11. -->
<!-- Retrieve the contents of a cookie identified by its name.
Use 'split()' to separate the multiple descriptors and values,
display the values in a bar chart -->

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<!-- Code source: http://www.justfigures.co.uk/ -->
<!-- A resource for web developers using XHTML, CSS, JavaScript, PHP -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>View code snippet page</title>
<script language="JavaScript" type="text/javascript">
//<![CDATA[
/* this function is same as 'setCookie()' JavaScript: Cookies
code snippet 3 but without the expiry date argument */
function setCookie(name,value){
document.cookie = name + "=" + value + ";path=/"
}
//]]>
</script>

<script language="JavaScript" type="text/javascript">
//<![CDATA[
// function to retrieve the contents of a cookie by its name
// function getCookie() was introduced in JavaScript: Cookies code snippet 4
function getCookie(name)
{
// concatenate '=' to the cookie name 
var cookieName = name + "="
// assign document.cookie to a variable
var docCookie = document.cookie
var cookieStart
var end
if (docCookie.length>0)
{
/* search for the location of the named cookie
in the document.cookie object string which may 
contain more than one cookie separated by '; ' */
	cookieStart = docCookie.indexOf(cookieName)
	// if the cookie does not exist then return false
	if (cookieStart != -1)
	{
	// if the cookie exists then go to the end of the cookie name
		cookieStart = cookieStart + cookieName.length
		/* look for the ';' that defines the end of the named
		 cookie we need, beginning at cookieStart */
		end = docCookie.indexOf(";",cookieStart)
		if (end == -1)
		{
			end = docCookie.length
		}
		// finally extract the required string
		return unescape(docCookie.substring(cookieStart,end))
	}
}
return false
}
//]]>
</script>

<script language="JavaScript" type="text/javascript">
//<![CDATA[
/* function to split multiple cookie descriptors and values */
/* first create two empty arrays to store the 
descriptors and values respectively */
var descriptorsArray = new Array ()
var valuesArray = new Array ()
	
function breakBigCookie(allContent){
/* split the descriptors and values into an array of individual 
pairs containing 'page name and number of times viewed' */
var splitContent = allContent.split("|") 
/* create a 'for loop' to iterate through the individual pairs
and assign the split contents to their respective arrays */
// first declare the variables
var valuePair,splitPair,descriptor,value
for(i=0; i<splitContent.length; i++){
	valuePair = splitContent[i]
	splitPair = valuePair.split(":")
	descriptor = (splitPair[0])//homePage, introPage etc for this example
	// add each iteration of the loop to 'descriptorsArray'
	descriptorsArray[i] = descriptor
	value = (splitPair[1])//5, 4 etc for this example
	// add each iteration of the loop to 'valuesArray'
	valuesArray[i] = value
	}
}
//]]>
</script>
</head>

<body>
<script language="JavaScript" type="text/javascript">
//<![CDATA[
/* create values for the cookie */
/* here the cookie contains details about a individual visitor's visit to an 
imaginary website: pages visited and the number of times each page is viewed */
var cookieData = escape("homePage:5|introPage:4|feedbackPage:2|summaryPage:8")
// call the setCookie() function to create the cookie
setCookie('pagesVisitedCookie',cookieData)

/* now retrieve the cookie and its content */
// assign the descriptors and values from the cookie to a variable
var allCookieContent=getCookie("pagesVisitedCookie")
/* let us write out all the descriptors and values from the cookie
to see what data the cookie contains */
document.write("<h2>The cookie contains the following details:<\/h2> " + allCookieContent + "<br \/>")
document.write("<h2>Display the cookie contents in a bar chart<\/h2> <br \/>")
// now call the function that separates the descriptors and values 
breakBigCookie(allCookieContent)
/* a 'for loop' which iterates through the values in 'descriptorsArray' and 'valuesArray'
and places the values in a table, as these arrays are the same length and the data in 
their index values correspond they can be accessed together as parallel arrays */
document.write("<h2>Pages visited and number of times each page viewed<\/h2><table>")
for (i=0;i<descriptorsArray.length;i++) {
	document.write("<tr><td>"+descriptorsArray[i]+"<\/td><td>")
	/* tile a 1 pixel image to create the bars of the chart,
	image tiled: 30 high X ((value in array) X 10) wide */
	document.write("<img src='blueDot.gif' height='30' width='"+(valuesArray[i]*10)+"'>")
	document.write("  "+valuesArray[i]+"<\/td><\/tr>")
}
document.write("<\/tr>")
document.write("<\/table>")
//]]>
</script>
</body>
</html>