|
What
is a cookie?
A
cookie is simply a variable that your web page can store on - or
retrieve from - the users computer.
The idea is, that next time the user arrives at your page, the value
of the cookie can be read by your page, and then be used for whatever
purpose you choose.
Examples
of cookies could be:
- First
time the visitor arrives the name is entered
(for example "John Wayne").
The username is then stored in a cookie.
Next time he arrives at your page, it writes something like:
"Welcome to my page John Wayne-good to see you again".
The name is simply retrieved from the stored cookie.
- First
time the user arrives at your page she enters the desired language.
The chosen language is stored in a cookie.
Next time she gets there, she will simply be taken to the pages
in the desired language without asking, since the desired language
is retrieved from the cookie.
- First
time the user arrives at your page he is asked to fill in a password.
Then the password is saved in a cookie.
Next time he arrives at your page, the password is retrieved from
the cookie.
Short
description of the technique.
Cookies
can be stored and retrieved using JavaScript.
The
script first sees if a cookie has already been set.
- If
so, it uses the cookie for some purpose.
- If
not it sets a cookie and uses it next time the user arrives at
the page.
Cookies
are stored until a specified expiredate.
If a cookie is present when a user arrives at your page it is stored
in the document.cookie-object
This
page will teach you how to read the cookie from the document.cookie-object,
as well as how to specify the variables used in the SetCookie-command.
The
Code:
In
order to use cookies on a page you need:
- a
function that reads the cookie (if present),
- a
function that stores the cookie.
- a
function to delete the cookie.
Below
are three functions that perform these tasks:
- getCookie
- setCookie
- delCookie
function
getCookie(NameOfCookie)
{
//
First we check if there is a cookie stored at all.
// Otherwise the length of document.cookie would be zero.
if (document.cookie.length > 0)
{
//
Second we check if the cookies name is stored in the
// "document.cookie"-object for the page.
//
Since more than just one cookie can be set on a
// single page it is possible that our cookie
// is not present, even though the "document.cookie"-object
// is not just an empty text.
// If our cookiename is not present the value -1 is stored
// in the variable called "begin".
begin = document.cookie.indexOf(NameOfCookie+"=");
if (begin != -1) // Note: != means "is not equal to"
{
//
Our cookie was set.
// The value stored in the cookie is returned from the function.
begin += NameOfCookie.length+1;
end = document.cookie.indexOf(";", begin);
if (end == -1) end = document.cookie.length;
return unescape(document.cookie.substring(begin, end)); }
}
return null;
//
Our cookie was not set.
// The value "null" is returned from the function.
}
function
setCookie(NameOfCookie, value, expiredays)
{
//
Three variables are used to set the new cookie.
// The name of the cookie, the value to be stored,
// and finaly the number of days till the cookie expires.
// The first lines in the function converts
// the number of days to a valid date.
var ExpireDate = new Date ();
ExpireDate.setTime(ExpireDate.getTime() + (expiredays * 24 *
3600 * 1000));
//
The next line stores the cookie, simply by assigning
// the values to the "document.cookie"-object.
// Note the date is converted to Greenwich Meantime using
// the "toGMTstring()"-function.
document.cookie = NameOfCookie + "=" + escape(value)
+
((expiredays == null) ? "" : "; expires="
+ ExpireDate.toGMTString());
}
function
delCookie (NameOfCookie)
{
//
The function simply checks if the cookie is set.
// If so the expiredate is set to Jan. 1st 1970.
If (getCookie(NameOfCookie)) {
document.cookie = NameOfCookie + "=" +
"; expires=Thu, 01-Jan-70 00:00:01 GMT";
}
}
Making
it work:
Simply
adding the above code to a page does not set any cookies. The functions
are the tools you need in order to read, set and delete cookies
on your page.
The
final step in adding a cookie to your page is to add a purpose to
the cookie. Decide whether you want the cookie to store the users
name, the date of his last visit to your page or the preferred language.
Or use the cookie for whatever other purpose you wish.
In
either case the codes you need to add to the cookie-scripts will
be different.
Click
here to see a sample page
showing how to make the cookie
store the users name.
Click
here to see a sample page
showing how to make the cookie
store the date of users last visit.
It
detects if the site has been
updated since the users last visit.
If so - a confirmbox gives the
option to go to an update-page
to see what's new.
Click
here to see a sample page
showing how to make the cookie
store a userpreference.
RAW
SCRIPT
Below is the cookie-script without the comments.
Copy and paste to use the script on your own site.
Function
getCookie(NameOfCookie)
{ if (document.cookie.length > 0)
{ begin = document.cookie.indexOf(NameOfCookie+"=");
if (begin != -1)
begin += NameOfCookie.length+1;
end = document.cookie.indexOf(";", begin);
if (end == -1) end = document.cookie.length;
return unescape(document.cookie.substring(begin, end)); }
}
return null;
}
function
setCookie(NameOfCookie, value, expiredays)
{ var ExpireDate = new Date ();
ExpireDate.setTime(ExpireDate.getTime() + (expiredays * 24 * 3600
* 1000));
document.cookie = NameOfCookie + "=" + escape(value)
+
((expiredays == null) ? "" : "; expires="
+ ExpireDate.toGMTString());
}
function
delCookie (NameOfCookie)
{ if (getCookie(NameOfCookie)) {
document.cookie = NameOfCookie + "=" +
"; expires=Thu, 01-Jan-70 00:00:01 GMT";
}
We
hope this tutorial was helpful. If you like, you can link to our
tutorials from your web site. Just use the following code:
<a
href="http://www.ezi-hosting.com/tutorials.htm">Free
Scripting Tutorials from EziHosting</a>
|
Web Hosting Australia Monthly
Special