JavaScript Advanced Tutorial (Lesson 2 Continued) Page 1/2_Basic Knowledge

Now that you have mastered advanced string processing and related array concepts, it’s time to open the magic cookie bottle. Cookies record information about people who visit your site. They actually reside on the user's hard drive. Even if the user has left your site, the cookie still exists on the user's hard drive. If the user returns to your site again, the cookie will remain on the user's hard drive. The cookie will be sent back to your server together, allowing you to count and process information about repeat visitors.

Let’s take a look at a typical example of cookie application. We set a cookie in a web page and then read it through other web pages. While using this example, think about how you would do this without cookies.

Because cookies involve writing and reading information to the user's hard drive, it involves a confidentiality issue. Cookies have their scope and inherent limitations. Its most important limitation is that not everyone's browser welcomes cookies. Even if the user's browser welcomes cookies, the user may refuse access to cookies (most people still welcome cookies). Each domain name is only allocated 20 cookies, so save them. Cookies must not be larger than 4 KB, of course 4,000 bytes is sufficient.

After understanding these limitations, we start to learn how to set cookies. Setting a basic cookie is easy. All you need to do is generate a string in a cookie_name=value
form and set the document.cookie property. The only trick: there can't be spaces, commas or semicolons in the cookie value. Fortunately, you don’t need to worry about these problems, because there are a series of functions that can help you encode and decode cookie attributes:

escape() and unescape().

The following simple example saves your name as a cookie:

function setCookie()
{
var the_name = prompt("What's your name?"," ");

var the_cookie = "wm_javascript=username:" escape(the_name);

document.cookie = the_cookie;

alert("Thanks, now go to the next page.");
}

The two lines in the middle of the function are the key:
var the_cookie = "wm_javascript=username:" escape (the_name);

If I am "dave thau" is entered in the prompt box, and this line of code will generate a string wm_javascript=username:dave thau. This means that I will save a cookie named wm_javascript to the hard drive. The value of this cookie is username:dave thau - the function escape() replaces the space between "dave" and "thau" with .

When we read the cookie, we look for the cookie named wm_javascript, then extract username:dave thau, decode it with unescape(), and remove username:.

document.cookie = the_cookie;

The cookie is now set, very simple.

Once you set a cookie on a user's hard drive, reading it is easy. The following is the code to read the cookie example:

function readCookie()
{
var the_cookie = document.cookie;
var broken_cookie = the_cookie.split(":");
var the_name = broken_cookie[1];
var the_name = unescape(the_name);

alert("Your name is: " the_name);
}

1st OK Very important. When your browser opens a web page, it calls any cookies associated with the web page and loads them into the document.cookie attribute.

The trick in reading cookies is to extract the information you need. Note that the cookie we set is like this: wm_javascript=username:dave thau. Everything after line 1 of this function is used to extract the username from the cookie.

var broken_cookie = the_cookie.split(":");
Split the cookie into two parts at the semicolon.

var the_name = broken_cookie[1];
Capture the content after the semicolon dave thau．

var the_name = unescape(the_name);
Cancel the encoding replacement of function escape(). In this example the . has been replaced with spaces again.

alert("Your name is: " the_name);
Show your name.

The cookie used in this example only saves very little information: username, and the cookie can save up to 4kb of information. In the next lecture we will talk about a complex example.