Persistent Data – Basic Concepts

Persistent Data

Before we get into the nitty gritties of how data can be made to persist between pages, I think it would be a good idea to give a concrete example of why one would want to implement such a thing. As a practical example, imagine you’re writing a Web site for your small rock band. You haven’t made it big yet, but you have a cult following that would like to be able to receive notices of your upcoming gigs. On your Web site, you want to create a form for people who would like to sign up to your mailing list, and you want people to be able to confirm their e-mail address before sending it off to you.

Now, if you were a big time operation, you would probably accomplish this by having the form submit it’s contents to a Common Gateway Interface (CGI) program installed on your Web server. The CGI program would take the information submitted (the e-mail address) and dynamically create a confirmation page containing the e-mail address the user entered. This page would be designed to resubmit the information to a second CGI program (this one responsible for adding people to the mailing list) if the user confirmed that the displayed e-mail address was correct.

Unfortunately you’re just a small-time garage band, and you can’t afford Web hosting beyond the free 5MB of Web space provided by your Internet Service Provider, which maintains a strict policy of “no custom CGI scripts”. Besides that, you really don’t have the time it takes to learn how to develop the two CGI programs required.

Lucky for you, there is another way. There are several techniques available to you that require no special support from your Web server, and still allow you to use the information entered into the form on the first page to create the content for the second page. Two such techniques will be presented in this article, along with practical examples of their use. At the heart of each of these techniques lies the JavaScript variable.

JavaScript Variables

JavaScript allows us to create variables in a page. These are named, invisible placeholders where information, such as numbers, pieces of text, or even images can be stored. Often, variables are used to store information that will be used to change the appearance of a Web page on the fly. For example, if you’re creating a mouseover effect for some image on your page, you might use a variable to store the image that will appear when the mouse is over the image.

Creating a variable in JavaScript is simple. The code takes the following form:

var myVariable = storedValue;

This is just the mouse over way of saying the following:

Create a variable called myVariable, and let its value equal storedValue.

Once a value has been assigned to a variable, any reference to the name of that variable in your code will effectively be replaced by the value you have assigned it.

For the purposes of this article, we’ll want to use variables to store information the user has provided. We’ll then use that information to control content the user views. Often, such information is entered by means of a form.

As a simple example, imagine the user has typed some text into an entry field on our Web page, and we wanted to store that text in a variable for later use. The code for the form would be something like the following:







Notice that we have called our form “myForm”, and our entry field “textToStore”. Also, notice the code onSubmit=”return false;” in the

tag. Since we’ll be handling all of the processing of the form with JavaScript, we don’t need to submit the form to the server. This code is the simplest way to create a form that doesn’t get submitted. How this works is beyond the scope of this article, and is better left for discussion at a later date.

Finally, notice the code onClick=”storeIt()” in the button tag. This tells the button to run the JavaScript function “storeIt” when it is clicked. A function is simply a piece of JavaScript code we’ve written and set aside to be triggered later by some event. In this case, the function is designed to store the text entered in a variable, then display a dialog box containing the value of the variable. It will be triggered by the button being clicked. The code for our function goes in the header of our HTML file, that is between our … tags, and looks like this:



In the above code, we created the variable storedText outside the function definition. This was done because variables which are created within function definitions can only be accessed from within that function. In other words, each time the function is triggered, the variable will be created, used, then automatically destroyed when the function finishes running. This would be no good, since we’re planning on using this variable to control some other content somewhere. We couldn’t do that if the variable was erased immediately after being assigned its value. Variables such as ours, however, which are created outside the function definition can be accessed by any code or function within the document, and are only automatically destroyed when the user moves on to another document. Such variables are called global variables.

The highlighted section of code in the above can be read as follows:

Create a function called storeIt which, when triggered, will do the following: Give the variable storedText the value of the element called textToStore in the form called myForm in the current document. alert the user by displaying a dialog containing the text “You typed: ” followed by the value of the variable storedText.

Together, the form and function will create the effect we’re after.

The Problem

Now that you have a bit of an idea of what a JavaScript variable is, there is still a big problem. What we’d like to do is to store a value entered by the user, then insert that value somewhere in one or more subsequent pages that the user views. The problem is that all variables associated with a particular Web page are destroyed by the browser for security reasons as soon as the user moves on to a new page.

This may seem like an annoying thing for the browser to do, but what if it didn’t? What if any anonymous Web page could read the variable that the last site you were at used to store your credit card information? No, JavaScript variables were intended merely to store temporary information for as long as the page that needs it is loaded.

The point of this article is to present two ways of getting around this problem, to allow your Web pages to share information back and forth. For the rest of Part 1, we’ll be looking at the first of these techniques: hiding data in a frameset.

Comments are closed.