Javascript: lets' talk about cookies

When you surf on the Web, you are using the HTTP protocol (HyperText Transfer Protocol); this is the language by means of which your browser (the client) and the host (the server) exchange information. In a nutshell, your client ask something to the server and it answer to the client (usually returning a web page). Then the connection is closed. But when a browser look at the page, it notice a lot of things: text, images, sounds and so on. Well, every times it notice a new object inside of the page (an image for example) it has to establish a new connection with the server to get it. This means that HTTP protocol is a stateless protocol. Well, as there is no way for the server to remember something about the previous connection, Netscape company invented an object called 'cookie'. So, what's a cookie? Well, a cookie is a little '.txt' file stored inside of your hard disk, where some information are placed. So you can build personalized pages by means of cookies, and in addition, you can know how many time a particular visitor visited your page! Wow! Now we can see an example. However remember: in order to see this example you have to enable Javascript in your browser, and you have to enable cookies . If you are worried about your privacy, don't worry: this is just an example, and you can delete the 'cookie.txt' file stored in your hard disk then. Vice versa, if you already have a cookie and you don't want to delete it, just save it as 'cookie.bak'. So then you could restore it by deleting my cookie 'cookie.txt' and renaming the 'cookie.bak' to 'cookie.txt. You could even delete my cookie only, by editing the 'cookie.txt' file and deleting the line containing 'visitor'. Ok. let's see:

Click here to store a cookie in your hard disk

Now click here to get the stored cookie

And this is the HTML page

<html><head><script language="JavaScript"><!-- Begin the script

var username
var youare
username = prompt('Please enter your name (otherwise press cancel)',"WebSurfer");

function getCookie(Name) {
var search = Name + "="
if (document.cookie.length > 0) {
offset = document.cookie.indexOf(search);
if (offset != -1) {
offset += search.length;
end = document.cookie.indexOf(";", offset);
if (end == -1){
end = document.cookie.length;
return unescape(document.cookie.substring(offset, end))}}
}
}

function whoareyou(){youare=getCookie('visitor');}

function SetCookie (name, value) {
var todayDate = largeExpDate = new Date ();
largeExpDate.setTime(todayDate.getTime() + 365 * 24 * 3600 * 1000);
document.cookie = name+'='+ escape(value) +'; expires=' +;
largeExpDate.toGMTString();}

function doSetCookie(){SetCookie('visitor', username)}
// Here end the script -->

</script></head><body>
<script>
doSetCookie();
whoareyou();
document.write("Hi, "+youare+"!");</body></html>

What do these colored statements mean?

username = prompt('Please enter your name (otherwise press cancel)',"WebSurfer");

Prompt will show a prompt window asking for a name. Here the visitor type his name. The default value is 'Websurfer'. If the visitor type a name, say 'Robert', and then press the OK button, that value will be placed inside of the variable named 'username'.

if (document.cookie.length > 0)

This if is needed to check if there is a cookie stored. In this case the length of document.cookie will be greater than 0.

offset = document.cookie.indexOf(search);

By means of this statement you get the starting position of the stored cookie (in this case its name is 'visitor'). In fact, indexOf(something), return the position where something is placed. This method is available for string objects.

if (offset != -1)

By means of this statement you are checking if the cookie named 'visitor' has been found. (in this case, 'search' is a variable which contains 'visitor=').

offset += search.length;

To get the position of the visitor's value. In fact cookies contain 'name=', a value, 'expires=', a value. In this case the visitor's value will be: 'Robert'.

return unescape(document.cookie.substring(offset, end))}}

Return simply return a value to the caller of the function. Unescape simply transform from the exhadecimal encoding to ASCII encoding. Substring(offset, end) return the string found between offset and end values. Obviously offset and end are variables.

var todayDate = largeExpDate = new Date ();

Here we are defining 2 object 'Date ()'. These are Javascript built in objects.

largeExpDate.setTime(todayDate.getTime() + 365 * 24 * 3600 * 1000);

Here there are 2 Javascript built in functions: getTime() and setTime(). These functions are available for Date() object. GetTime() return the time in milliseconds, setTime() set the time in milliseconds. So todayDate.getTime() return the time of todayDate object in milliseconds. In other words you get the current date in milliseconds (starting from 1/1/1970 at 00:00:00). 365 * 24 * 3600 * 1000 compute an year in milliseconds (1 year is composed by 365 days. 1 day is composed by 24 hours. An hour is composed by 3600 seconds, 1 second is composed by 1000 milliseconds). In a nutshell you get the next year's date in milliseconds. Which it means the cookie will expires exactly in a year.

document.cookie = name+'='+ escape(value) +'; expires=' + largeExpDate.toGMTString();

Well, this is the format of a cookie. LargeExpDate.toGMTString() transform largeExpDate (which is in milliseconds) in GMT format (e.g. Mon, 31 Dec 1997 12:30:00 GMT). Escape(something) transform the exhadecimal encoding of a character in the corresponding ISO latin-1 characters set encoding. You have to use it when there are characters like dashes, slashes and so on.

What does this script do

First of all this script ask you for a name (prompt). Then it sets a cookie in your hard disk (SetCookie). Then it searches the value of the cookie named 'visitor' (in order to get the name - which you have given - stored inside of the cookie 'visitor'). Finally it writes a document with greetings. Well, I have to say you something: this isn't a good script. In fact when the web browser reads this page, it calls the Javascript interpreter which reads statements and (if there aren't mistakes) perform them. In other words when it reads this statement:

username = prompt('Please enter your name (otherwise press cancel)',"WebSurfer");

the Javascript interpreter perform it IMMEDIATELY. What I means? Well, if you write Javascript statements inside of <head> tags, these will be executed as soon as the Javascript interpreter reads them. In order to avoid that, you have to DEFINE FUNCTIONS. In fact, when the Javascript interpreter finds a function definition, it knows that it hasn't to perform it immediately. It will perform the function AS SOON AS IT IS CALLED. You can notice that, by looking at the status bar. In fact in the bad way (the Javascript interpreter perform statements immediately) you can see the status bar telling that the document isn't downloaded yet. Vice versa, by using the right way, the status bar will say to you: 'Document: Done'. Warning: this page contains a little bit different script. In fact here I build a little window too. However you can always see the source of this page...

Limitations

Maximum stored cookies in a cookie file: 300
Maximum size for a cookie: 4Kbytes
Maximum number of cookies stored by the same domain: 20