HTML and CSS Reference
In-Depth Information
EXAMPLE
16.3 (
CONTINUED
)
}
}
8
alert(cookiestr);
}
</script>
</head>
9
<body onLoad="document.form1.reset()" >
<div align="center"><h2> Got milk?</h2>
<form name="form1">
Click to see document.cookie property
<p>
10
<input type="button" value="See Cookie"
onClick="seeCookie();
"/>
</p>
</form>
</div>
</body>
</html>
EXPLANATION
1
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.
2
The
split
function splits up the cookie string by semicolons and returns an array
called
myCookie
.
3
The
for
loop iterates through each element of the
myCookie
array until the end of
the array,
myCookie.length
, is reached.
4
Each time we get a cookie it is appended to this string, called
cookiestr
.
5
The name/value pairs of the cookie string are split by “=” signs. An array is re-
turned.
6
If the name assigned to the cookie is “color”, that name is stored in
cookieData[0]
and the color choice of the user is stored in
cookieData[1]
.
7
Based on the user's preference of color, the background color of the page is
changed.
8
The alert box displays all the cookies that were retrieved.
9
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()
method.
10
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.
