Using JavaScript to Maintain State

Hypertext Transport Protocol was designed as a stateless system: because servers simply transmit information to browsers without maintaining connections, the conditions of a Web page are essentially determined by the markup. What you see is what's been written. Think of stone tablets; not for nothing was the first great Web browser called "Mosaic."

In advanced Web design we frequently want to overcome the statelessness of the page by storing persistent information. We may want to record how many times a reader has visited a particular page, to maintain interface settings, shopping preferences, etc. There are four main ways to do this:

1. Use a CGI or middleware program to store information in a server-side database;



2. Encode data in URL links;



3. Store the information in hidden form fields or frames;



4. Record the information in client-side browser cookies.

The first of these solutions is probably best, but it requires considerable technical skill to implement (the sort of skill taught in Erich Spencer's course Dynamic Web Sites, coming up this spring). The second solution works well enough for small amounts of information, but does not scale up very well. In this class we will concentrate on the latter two options: hidden form elements and cookies.

Invisible form elements are easy to use (you already know all the necessary code) but have an important drawback: anything stored in them disappears when the user quits the browser. Cookies are a bit more complicated in a technical sense but are considerably more powerful. Practically speaking, cookies can last for weeks or months and can store information between browser sessions. Using a combination of these techniques, you can create highly sophisticated pages without any server-side manipulations.

Since we'll need to go into considerable detail, especially concerning cookies, the discussion of these two approaches has been broken out into separate pages. Each also has a demonstration page. Follow the link of your choice.

I've also written a do-it-yourself lab to help you master these techniques.