HTML and CSS Reference
EXAMPLE 16.3 ( CONTINUED )
<body onLoad="document.form1.reset()" >
<div align="center"><h2> Got milk?</h2>
Click to see document.cookie property
<input type="button" value="See Cookie"
A function called seeCookie() is defined. It will list out all the cookies that have
been set. First, we check to see if there are any cookies at all. If not, the alert box
will say so.
The split function splits up the cookie string by semicolons and returns an array
called myCookie .
The for loop iterates through each element of the myCookie array until the end of
the array, myCookie.length , is reached.
Each time we get a cookie it is appended to this string, called cookiestr .
The name/value pairs of the cookie string are split by “=” signs. An array is re-
If the name assigned to the cookie is “color”, that name is stored in cookieData
and the color choice of the user is stored in cookieData .
Based on the user's preference of color, the background color of the page is
The alert box displays all the cookies that were retrieved.
When the document is loaded and every time the user refreshes the page, the on-
Load event is triggered and the values in the form are cleared with the reset()
When the user clicks the button, the onClick event is triggered, and the seeCook-
ie() function will be called to display all the cookies for this page. The process is
shown in Figures 16.11 and 16.12.