Persistence Overview

Persistence enables authors to specify an object to persist on the client during the current and future sessions using DHTML behaviors. Persistence allows Microsoft® Internet Explorer 5 and later to retain Web page information, styles, variables, and state. For example, a collapsible list of links within a table of contents can remain expanded to the user's choice upon leaving and later returning to the page. Or, a search engine query form can retain the last-used search string.

Persistence is implemented as a behavior. The new persistence behaviors include:

• saveFavorite—persists page state and information when the web page is saved as a favorite.
• saveHistory—persists page state and information within the current session's memory.
• saveSnapshot—persists page state and information directly in the page when the user saves the Web page to his or her hard disk.
• userData—persists page state and information within an XML store, a hierarchical data structure.

Persistence creates new opportunities for the author. Information that persists beyond a single page without support from the server, or within the finite scope of cookies, can increase the speed of navigation and content authoring.

These behaviors can be used to preserve information in the browser's history, in favorites, in an XML store, or directly within a Web page saved to disk. When a user returns to a persisted page, the state of the page can be restored. By allowing information to safely reside on the client, fewer server transactions are required. Custom start pages and Web applications will prosper because information can continue to exist without the paternal support of the server, or repeated server queries. A Web page can remain interactive to a degree, after the connection with the host has been severed, by persisting required information on the client.

• Benefits
• Using Persistence
• Example Uses of Persistence
  • saveFavorite
  • saveHistory
  • saveSnapshot
  • userData
• Persisting Content in XML
• Persistence How-Tos
• Related Topics

Benefits

Use of persistence in Internet Explorer 5 breaks away from the tradition of using cookies and session files to store information. The Microsoft model for client-server relationships using persistence and Internet Explorer 5 is pragmatic; it maintains the same-domain security policy associated with cookies while increasing storage and management capabilities.

Using Persistence

Persistence behaviors require certain conditions before they can be used. A META tag directs the browser that the page is persistent. Persistent elements are identified with a class and an ID property. The onsave and onload event handlers can be defined for nondefault handling.

An ID is not required for the saveFavorite and saveHistory behaviors, but is recommended for performance. The STYLE element also can be set inline on a persistent object.

Example Uses of Persistence

Following are examples of using behaviors to implement persistence.

Sample Code

saveFavorite

This is an example of the saveFavorite behavior.

<!-- Tell the browser the page is persistent-->
<META NAME="save" CONTENT="favorite">
<!-- Define the class for the persistent object-->
<STYLE>
    .saveFavorite {behavior:url(#default#savefavorite);}
</STYLE>
<SCRIPT>
// Record information to the persistent object as an attribute.
function fnSave(){
   oPersistInput.setAttribute("sPersistAttr",oPersistInput.value);
}
// Retrieve information from a persistent object.
function fnLoad(){
   oPersistInput.value=oPersistInput.getAttribute("sPersistAttr");
}
</SCRIPT>
:
<!-- The CLASS enables the object to persist, the event handlers 
     fire the scripted functions.-->
<INPUT
   TYPE="text"
   CLASS="saveFavorite"
   ID="oPersistInput"
   onload="fnLoad()"
   onsave="fnSave()"
>

This feature requires Internet Explorer 5 or later. Click the icon below to install the latest version. Then reload this page to view the sample.

saveHistory

This is an example of the saveHistory behavior.

<!-- Tell the browser the page is persistent-->
<META NAME="save" CONTENT="history">
<!-- Define the class for the persistent object-->
<STYLE>
    .saveHistory {behavior:url(#default#savehistory);}
</STYLE>
:
<!-- The default behavior is to persist form elements.
   When the saveHistory behavior is defined, form elements
   will not persist unless they have a class.
-->
This will persist:
<INPUT TYPE="text" CLASS="saveHistory" ID="oPersistInput">
This will not persist:
<INPUT TYPE="text">

This feature requires Internet Explorer 5 or later. Click the icon below to install the latest version. Then reload this page to view the sample.

saveSnapshot

This is an example of the saveSnapshot behavior.

<!-- Tell the browser the page is persistent-->
<META NAME="save" CONTENT="snapshot">
<!-- Define the class for the persistent object-->
<STYLE>
    .saveSnapshot {behavior:url(#default#savesnapshot);}
</STYLE>
:
<!-- When the page is saved, the information entered in the
     persistent form element will be inserted as the value
     within the HTML file.-->
<INPUT TYPE=text CLASS=saveSnapshot ID=oPersistInput>
:

This feature requires Internet Explorer 5 or later. Click the icon below to install the latest version. Then reload this page to view the sample.

userData

This is an example of the userData behavior.

<!-- Define the class for the persistent object-->
<STYLE>
    .userData {behavior:url(#default#userdata);}
</STYLE>
<SCRIPT>
    function fnSaveInput(){
   
// Persistent information is stored as an attribute
// on the persistent object, and saved within a
// UserData store.
      var oPersist=oPersistForm.oPersistInput;
      oPersist.setAttribute("sPersist",oPersist.value);
      oPersist.save("oXMLBranch");
  
   }
    function fnLoadInput(){

// Persistent information is loaded from a UserData store
// and the value is restored from the persisted attribute.

      var oPersist=oPersistForm.oPersistInput;
      oPersist.load("oXMLBranch");
      oPersistInput.value=oPersistInput.getAttribute("sPersist");
   }
</SCRIPT>
:
<FORM ID="oPersistForm">
<INPUT class=userData type=text id=oPersistInput>
<INPUT type=button value="Load" onclick="fnLoadInput()">
<INPUT type=button value="Save" onclick="fnSaveInput()">
</FORM>

This feature requires Internet Explorer 5 or later. Click the icon below to install the latest version. Then reload this page to view the sample.

Persisting Content in XML

The XMLDocument property allows the saveFavorite, saveHistory, and userData behaviors to access the XML Document Object Model (DOM). Using the XML DOM, persistent objects have access to the objects, properties, and methods that allow the author to build hierarchical data structures.

var oXMLDocument=oPersistText.XMLDocument;
var oNode=oXMLDocument.createNode(0,"MyElement");
oNode.nodeValue="The value of MyElement";
oXMLDocument.documentNode.insertNode("MyElement");

In XML, this would yield:

<MyElement>The value of MyElement</MyElement>

Persistence How-Tos

Persistence introduces a broad expanse of possibilities. The following how-to articles cover some of the more interesting, albeit easy-to-employ, uses of persistence.

• saveFavorite
  • Persisting Custom and Dynamic Styles
• saveHistory
  • Persisting Collapsible Table of Contents State
• saveSnapshot
  • Persisting Form Data
• userData
  • Persisting Session Information

Related Topics

The following articles and references contain additional information on authoring and implementing DHTML behaviors.

• DHTML Behaviors
• Client Capabilities

• Default Behaviors Reference