I've been meaning to do this tutorial for a while and have finally got round to it, cookies! Not the chocolate chip sort, but the internet sort.
So what is a cookie? A cookie is simply a variable that your webpage can store on or retrieve from the user's computer. It's the main way of storing basic information about users, such as their last IP address, their name or what they bought last time they were on your shopping site. The idea is that the cookie is stored on the user's computer, not the server machine, and therefore doesn't take up valuable space on the server.
Then, the next time the user arrives at your page, the value of the cookie can be read by your page, and then used for whatever purpose you choose. If yours was a shopping website, you could store what a visitor bought last time in a cookie, and next time they arrive, could can tell them what new things might be of interest to them.
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 visits your site, 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. The password is saved in a cookie. Next time he arrives at your page, the password is retrieved from the cookie.
JavaScript cookies are easily manipulated using the document.cookie property.
Setting Cookies
To set a cookie all we need to do is assign a value to the document.cookie property.
document.cookie = "name=value";
Retrieving Cookies
Reading cookies is equally as easy. Simply read the value of document.cookie.
alert(document.cookie);
JavaScript Cookie Functions
This all looks very simple, but what about getting cookies with a specific name, or setting expiry dates? To do this we need to use a bunch of utility cookie functions:
The following is the contents of a cookie functions file which can downloaded here. The comments describe how each function is used. As this is a .js file, to integrate it into your page put <script language="javascript" src="ls_cookies.js"></script> into the <head> section of your page.
/**
* This function sets a Cookie with the given name and value.
*
* PARAMETERS:
* name Name of the cookie
* value Value of the cookie
* [expires] Expiration date of the cookie (default: end of current session)
* [path] Path where the cookie is valid (default: path of calling document)
* [domain] Domain where the cookie is valid
* (default: domain of calling document)
* [secure] Boolean value indicating if the cookie transmission requires a
* secure transmission
*/
function setCookie(name, value, expires, path, domain, secure)
{
document.cookie= name + "=" + escape(value) +
((expires) ? "; expires=" + expires.toGMTString() : "") +
((path) ? "; path=" + path : "") +
((domain) ? "; domain=" + domain : "") +
((secure) ? "; secure" : "");
}
/**
* Gets the value of the specified cookie.
*
* PARAMETERS:
* name Name of the desired cookie.
*
* Returns a string containing value of specified cookie,
* or null if cookie does not exist.
*/
function getCookie(name)
{
var dc = document.cookie;
var prefix = name + "=";
var begin = dc.indexOf("; " + prefix);
if (begin == -1)
{
begin = dc.indexOf(prefix);
if (begin != 0) return null;
}
else
{
begin += 2;
}
var end = document.cookie.indexOf(";", begin);
if (end == -1)
{
end = dc.length;
}
return unescape(dc.substring(begin + prefix.length, end));
}
/**
* Deletes the specified cookie.
*
* PARAMETERS:
* name name of the cookie
* [path] path of the cookie (must be same as path used to create cookie)
* [domain] domain of the cookie (must be same as domain used to create cookie)
*/
function deleteCookie(name, path, domain)
{
if (getCookie(name))
{
document.cookie = name + "=" +
((path) ? "; path=" + path : "") +
((domain) ? "; domain=" + domain : "") +
"; expires=Thu, 01-Jan-70 00:00:01 GMT";
}
}
Using this collection of functions, we could do something like the following:
<input type="button" value="Click to Set Cookie" onclick='setCookie("name", "Joe Bloggs")'>
or
<a href="#" onclick='setCookie("name", "Joe Bloggs")'>Click to Set Cookie</a>
and then we would want to retrieve it, would we not?
And that's the end of this tutorial! it's not very long because cookies are very simple, whilst having hundreds and thousands of uses across the internet from remembering users' screen resolutions to a personalised "Welcome back!".
If you know JavaScript well you can make it much more advanced, for example storing more than one piece of information in a cookie. If you would like to do this, the Query String with JavaScript tutorial I have written will be of great help, as it is the same principal of encoding and extracting data.
