|
|
Cookies have been the subject of a lot of
controversy right
from the time Netscape incorporated it into it's browser. A cookie
is a small piece of information that a web page can store on your machine
and retrieve it on your subsequent visits. To protect your privacy, a
cookie set by one particular site cannot be accessed by another site. So
if you had any plans to surprise your visitors with messages like "I know
what you did yesterday blah blah blah...", you can forget it right now.
To learn how to use cookies in Javascript, I went to
Netscape's Javascript Guide and found these two functions that
I thought were very useful. I have modified it to make it look simpler
but the functionality is essentially the same.
<![CDATA[
<SCRIPT LANGUAGE="Javascript">
<!-- Hide from older browsers
// Sets cookie values. Expiration date is optional
function setCookie(name, value, expire)
{
strCookie = name + "=" + escape(value);
if (expire)
strCookie += "; expires=" + expire.toGMTString();
document.cookie = strCookie;
}
function getCookie(Name)
{
var search = Name + "="
if (document.cookie.length > 0) {
// if there are any cookies
offset = document.cookie.indexOf(search)
if (offset != -1) {
// if cookie exists
offset += search.length
// set index of beginning of value
end = document.cookie.indexOf(";", offset)
// set index of end of cookie value
if (end == -1)
end = document.cookie.length
return unescape(document.cookie.substring(offset, end))
}
}
}
// End hiding -->
</SCRIPT>
]]>
To use these functions in your page, add the above code between the
<HEAD> and </HEAD> tags in your
HTML file. But before you start using these functions, it would be a
good idea to understand how these functions work.
A cookie basically consists of three pieces of information: a variable
name, an associated value and an expiration date. For example, when a
person visits your web page, you can have a form asking his/her name
and save it as a cookie so that you can greet your visitors by name
on their subsequent visits. In this case, you would create a cookie
called 'visitor' and assign it the value the user enters in the form
and set the expiration date to a few months ahead of the current day.
You access cookies by using the document.cookie variable.
<![CDATA[
document.cookie = "visitor=yoda; expires=Sun, 01-Jan-01 00:00:00 GMT";
]]>
The above line will create a cookie called visitor and
set it's value to 'yoda' and this cookie will be active till the year
2001. The expires part is actually optional and if it is
left out, the cookie you create will expire as soon as the browser
window is closed.
The setCookie() function given above does the same this
except that it creates the string from the arguments passed and
assigns it to document.cookie. The following lines
of code will set the same cookie.
<![CDATA[
expireDate = new Date("January 01, 2000 00:00:00");
setCookie("visitor", "yoda", expireDate);
]]>
Ofcourse you don't want to set the name of every visitor as 'yoda'
(unless you are a big Star Wars
fan). Let us create a form to ask the vistor for his name and use
that to set the cookie.
<![CDATA[
<SCRIPT LANGUAGE="Javascript">
<!--
function saveVisitor()
{
var visitorName = document.myForm.visitor.value;
setCookie("visitor", visitorName);
}
// -->
</SCRIPT>
<FORM NAME="myForm">
Please enter your name:
<INPUT TYPE=TEXT NAME="visitor">
<INPUT TYPE=BUTTON VALUE="Save" onClick="saveVisitor()">
</FORM>
]]>
Here is the result. Please enter your name and click the 'Save' button
to save your name as a cookie.
Once you save the cookie, the value of document.cookie
should have been modified accordingly. To see the value of
visitor,
click here. This link was coded as
<A HREF="Javascript:alert(getCookie('visitor'))">
This example is getting pretty long and the complex part is just
beginning. Reading a cookie back is not as simple as writing a
cookie because if you ask for the value of document.cookie,
you will get a formatted string containing all cookies. To see what
I mean, take a look at what the following code produces:
alert(document.cookie);
You will see the cookie you set earlier, but you will also see other cookies
that this page automatically sets. (These cookies are used by the banners on this
page to make sure that the same banner does not get diplayed over and over again).
Extracting the value of a particular cookie out of this mess can be tiresome
but fortunately we already have the getCookie() function that
already does it for us. We already saw above that calling getCookie("visitor")
returned the value of the visitor cookie.
See Also:
Cookie Scripts from The Javascript Source
Cookies and Forms from Irt.org
Cookie tips from Webreference
|
