In this page we summarize the common changes, additions, and available methods that you can use in programming persistence. First, you have to add the following META tag to your page:

<META NAME="save" CONTENT="<persistenceBehavior>">

where <persistenceBehavior> can be favorite, history, snapshot, or userdata.

Secondly, you need to define the persistence as a built-in one:

<STYLE>  
  .save<persistenceBehavior>{behavior:url(#_IE_);}
</STYLE>

where <persistenceBehavior> is one of the four specified above.

Next, you need to decide which elements we want to persist. You have seen examples where we persisted the BODY element, an IMG element, an INPUT element, and a SCRIPT element. In order to enable a persistent element, you need to specify its Behavior via the CLASS attribute, and assign an ID to the element.

The element's ID is the key to all persistence Behaviors. They all share the same principle, which is first packing the data into the element's object (identified by its ID). Packing of data into the element's object is done via the setAttribute() method, as we explain below. Unpacking the data out of the element's object is done via the getAttribute() method. Persistence Behaviors differ from each other in the way they expect the save and load operations to be triggered. The favorite Behavior expects the save operation to be triggered by the user when he or she selects the Add to Favorites option from the Favorites menu. It expects the load operation to be triggered by the user when he or she selects the favorite name from the list of available favorites. The history Behavior saves the Web page when the user goes Back or Forward, and restores it when the user comes back to the page. The snapshot Behavior saves the data when the user enter a form filed, and it restores the data when the form comes up. The userdata Behavior expects the user to explicitly save and load the element's object via the save() and load() methods, respectively.

For the the favorite and history Behaviors, you need to define an onload() and an onsave() event handlers. The acts of save and load is being done in these event handlers. In the case of the userdata Behavior, these operations can be invoked anywhere in the JavaScript code, and there are no event handlers that do them automatically. You don't need these event handlers for the snapshot Behavior either, because it saves form data automatically.

The generic persistence element definition looks like this:

<<TAG> CLASS="save<Behavior>" ID="id"
 onload="<onloadEventHandler()>" onsave="<onsaveEventHandler()>">

The onsave() event handler defines attributes that store whatever information you need to persist. We use the setAttribute() method to create the attributes:

setAttribute("<attributeName>", <data>);

where <attributeName> is an author-determined name, and <data> can be of any scalar type such as an object property value, an array element, a variable, etc. The onload() event handler decipher the attributes by the getAttribute() method:

<data> = getAttribute("<attributeName>");

Remember to check for the existence of the attributes before you assign them to properties. If you will not check it, properties would be assigned NULL values.