Lab: Maintaining State

This lab will teach you how to keep track of page state using client-side cookies and invisible form fields.

Step 1: Setup

[1.1] All the files you will need for this lab are stored in the directory called stateLab within productionShare on Crow. Download this directory to your local machine. Launch a browser and a text editor.

[1.2] Open the file stateLab.htm in your browser. Open the files stateLab.htm, visible.htm, and hidden.htm in your text editor. You'll see three other pages in the directory, each of which has "finished" in its title. These are the solution pages. Consult them if you get stuck, but don't open them yet.

Step 2: Tracking the user name with cookies

[2.1] Bring up the page visible.htm in your text editor. Scroll down through the markup until you see the FORM container. Notice that there are two buttons defined, each of which calls a JavaScript function: setCookie() and tossCookie(). Begin by settin up blank function bodies for these functions. Scroll up to the head of the document, find the SCRIPT container there, and then find the comment "//New scripts here." Set up a function body for setCookie() and tossCookie().

[2.2] Enter the following into the function body for setCookie():

  theUser = document.forms[0].elements[0].value;
  document.cookie = "labCookie="+theUser+"; 
  expires=Sun, 24-Oct-10 12:00:00 GMT";

Type the second statement without a line break, not as you see it here.

The first statement pulls a value out of the text input form field on this page and assigns it to the variable theUser. The second statement creates a cookie called labCookie that records the value in that field. (It's okay if the field is blank.) This cookie is set to expire about 10 years in the future. This step lets you record the name of a registered user and store it more or less permanently.

[2.3] Since the script for reading a cookie is fairly complicated, it's already written for you in the markup for visible.htm. The function is called getCookie(name). To make the previous step useful, you need to write some code that reads the cookie file and retrieves the name of the registered user. We're going to put that code into a directly-executed script container within the body of the page. Look in the markup for the HTML comment "<!--Insert first body script here -->". Type a script container, and within it the following statements:

  var result = null;
  getCookie("labCookie");
  if(result == null) result = "Citizen";
  document.write("<h2>Welcome " + 
  result + "! </h2>");

The first of these statements initializes a variable called result to null; this clears the variable in case it was previously used. The next statement invokes our predefined getCookie(name) function and passes the string "labCookie" as the name to search for. Note that this was the name we gave to our cookie in Step 2.2. The third statement covers us in case no user has been registered (i.e., there is no "labCookie" defined). In this case the user becomes "Citizen." The final statement prints a greeting.

[2.4] You should now be able to test your work. Go to your browser and load the page stateLab.htm. You should see the "Citizen" greeting. Type something into the input field and click "Register User." Reload the page. You (or your user) should now be greeted by name.

Step 3: Erasing an existing cookie

[3.1] Return to your text editor. Scroll back up to the head portion of visible.htm and find the blank function tossCookie().

[3.2] Within this function body, type the following statement:

  document.cookie = "labCookie=gone; expires=Sat, 
  28-Oct-00 12:00:00 GMT";

Again, try to keep the whole statement on one line, not as you see it here.

This statement discards the cookie "labCookie" by backdating its expiration. This is the official method for discarding unwanted cookies.

Step 4: Tracking visits with an invisible form

[4.1] Bring up the page hidden.htm in your text editor. Create a FORM container on that page. Include within this form two INPUT elements, each with a TYPE of "text." Set the VALUE of the first element to "0" and the VALUE of the second element to "". Be sure to save your work.

[4.2] Return to to visible.htm in your editor. Find the HTML comment . Within the script container, type the following statements:

  visitCount = 
  parent.frames[1].document.forms[0].elements[0].value;
  visitCount++;	
  document.write("Your visits to this page: "+visitCount);
  parent.frames[1].document.forms[0].elements[0].value = 
  visitCount;

The first statement pulls the value from the first form field on the righthand frame in the current frameset (which happens to contain the page hidden.htm) and assigns it to a variable called visitCount. The value of this field is initially defined as "0," according to Step 4.1. The second statement increases the value of visitCount by 1 (that's what that "++" sign means). The third statement prints out the results of our little calculation. The final statement rewrites the incremented value into the righthand form field.

[4.3.] Find the link on stateLab.htm labeled "Reload!" Click this link cue a few times. You'll see both the output line and the value in the form field (which we haven't hidden yet) go up on each iteration.

[4.4] Go back into your text editor. Immediately below the last line you typed in Step 4.2, enter the following statements:

  visitDate = 
  parent.frames[1].document.forms[0].elements[1].value;
  document.write("<br>You last visited on: "+visitDate);
  currDate = new Date;
  parent.frames[1].document.forms[0].elements[1].value = 
  currDate;

The first of these statements pulls a value from the second of the form fields in the righthand frame (as yet unhidden) and assigns it to the variable visitDate. The second statement outputs this value. The third statement creates a new instance of the Date object, which is a fancy way of saying that it checks the current date and time. Note that this is the current time, not the previous time recorded on the storage page. In the final statement, this current value is written over into the storage field.

[4.5] Now we're going to hide those storage fields. In your text editor, pull up the code for the page stateLab.htm, the frameset page for this project. In the initial FRAMESET tag, set the COLS attribute to "500,0" and the BORDER attribute to "0". In your browser, hold down the shift key and reload. The righthand frame should disappear from view (but not, of course, from the browser's memory). If you did your work correctly, the visit tracking functions should still be working.

Step 5: Clear the visit records

[5.1] Return to the page visible.htm in your text editor. Notice that there is an HTML text link on the cue "I was never here." This link invokes a JavaScript function called forgetAboutIt(). In the script container within the head portion of the page, set up the appropriate function body.

[5.2] Within this function body, enter the following statements:

  parent.frames[1].document.forms[0].elements[0].value="0";
  parent.frames[1].document.forms[0].elements[1].value="";

As you can see, these statements reset the storage fields on the now-invisible righthand page back to their initial values. If you click "I was never here" and then click the reload cue, you should return to the unvisited state.