Javascript cookie

Cookies
Cookies were originally invented by Netscape to give 'memory' to web servers and browsers. The HTTP
protocol, which arranges for the transfer of web pages to your browser and browser requests for
pages to servers, is state-less
, which means that once the server has sent a page to a browser
requesting it, it doesn't remember a thing about it. So if you come to the same web page a
second, third, hundredth or millionth time, the server once again considers it the very first time you ever came there.

This can be annoying in a number of ways. The server cannot remember if you identified
yourself when you want to access protected pages, it cannot remember your user preferences, it
cannot remember anything. As soon as personalization was invented, this became a major problem.

Cookies were invented to solve this problem. There are other ways to solve it, but cookies are
easy to maintain and very versatile.

How cookies work
A cookie is nothing but a small text file that's stored in your browser. It contains some data:

1. A name-value pair containing the actual data
2. An expiry date after which it is no longer valid
3. The domain and path of the server it should be sent to

As soon as you request a page from a server to which a cookie should be sent, the cookie
is added to the HTTP header. Server side programs can then read out the information
and decide that you have the right to view the page you requested or that you want your links
to be yellow on a green background.

So every time you visit the site the cookie comes from, information about you is available.
This is very nice sometimes, at other times it may somewhat endanger your privacy. Fortunately
more and more browsers give you the opportunity to manage your cookies (deleting the one
from the big ad site, for example).

Cookies can be read by JavaScript too. They're mostly used for storing user preferences.

name-value
Each cookie has a name-value pair
that contains the actual information. The name
of the cookie is for your benefit, you will search for this name when reading out the cookie
information.

If you want to read out the cookie you search for the name and see what value is attached to it.
Read out this value. Of course you yourself have to decide which value(s) the cookie can have and
to write the scripts to deal with these value(s).

Expiry date
Each cookie has an expiry date
after which it is trashed. If you don't specify
the expiry date the cookie is trashed when you close the browser. This expiry date should
be in UTC (Greenwich) time.

Domain and path
Each cookie also has a domain
and a path
. The domain tells the browser
to which domain the cookie should be sent. If you don't specify it, it becomes the domain of
the page that sets the cookie, in the case of this page www.quirksmode.org
.

Please note that the purpose of the domain is to allow cookies to cross sub-domains. My cookie
will not be read by search.quirksmode.org because its domain is www.quirksmode.org . When I set the
domain to quirksmode.org, the search sub-domain may also read the cookie.

I cannot set the cookie domain to a domain I'm not in, I cannot make the domain www.microsoft.com .
Only quirksmode.org is allowed, in this case.

The path
gives you the chance to specify a directory where the cookie is active.
So if you want the cookie to be only sent to pages in the directory cgi-bin, set the
path to /cgi-bin
. Usually the path is set to /
, which means the cookie is
valid throughout the entire domain.

This script does so, so the cookies you can set on this page will be sent to any page in the
www.quirksmode.org
domain (though only this page has a script that searches for the
cookies and does something with them).

document.cookie
Cookies can be created, read and erased by JavaScript. They are accessible through the
property document.cookie
. Though you can treat document.cookie as if it's a
string
, it isn't really, and you have only access to
the name-value
pairs.

If I want to set a cookie for this domain with a
name-value pair 'ppkcookie1=testcookie' that expires in seven days from the moment I
write this sentence, I do

document.cookie =
  'ppkcookie1=testcookie; expires=Thu, 2 Aug 2001 20:47:11 UTC; path=/'

First the name-value pair ('ppkcookie1=testcookie
')
1. then a semicolon and a space

then the expiry date in the correct format ('expires=Thu, 2 Aug 2001 20:47:11 UTC
')
2. again a semicolon and a space

then the path (path=/
)

This is a very strict syntax, don't change it!
(Of course the script manages these dirty bits for you)


Also, even though it looks like I'm writing this whole string to the string document.cookie,
as soon as I read it out again I only see the name-value pair:

ppkcookie1=testcookie

If I want to set another cookie, I again do

document.cookie =
  'ppkcookie2=another test; expires=Fri, 3 Aug 2001 20:47:11 UTC; path=/'

The first cookie is not overwritten, as it would when document.cookie
would be
a real string. Instead the second one is added to document.cookie
, so if we read it out we get

ppkcookie1=testcookie; ppkcookie2=another test

If I reset a cookie

document.cookie =
  'ppkcookie2=yet another test; expires=Fri, 3 Aug 2001 20:47:11 UTC; path=/'

the old cookie is overwritten and document.cookie reads

ppkcookie1=testcookie; ppkcookie2=yet another test

To read out a cookie you have to treat document.cookie as a
string
and search for certain characters
(semicolons, for instance) and for the cookie name. I'll explain how to do it below.

Finally, to remove a cookie, set it with an expiry date before today. The browser sees
that the cookie has expired and removes it.

document.cookie =
  'ppkcookie2=yet another test; expires=Fri, 27 Jul 2001 02:47:11 UTC; path=/'


function createCookie(name,value,days) {
if (days) {
var date = new Date();
date.setTime(date.getTime()+(days*24*60*60*1000));
var expires = "; expires="+date.toGMTString();
}
else var expires = "";
document.cookie = name+"="+value+expires+"; path=/";
}

function readCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for(var i=0;i < ca.length;i++) {
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1,c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
}
return null;
}

function eraseCookie(name) {
createCookie(name,"",-1);
}