|
Internet Explorer 5.0 introduces saveSnapshot, a Behavior that enables persistence of an HTML file when you save it onto your hard disk. This Behavior is specifically targeted towards persistence of form data, as explained below. Let's practice it a little so you understand the power behind it.
Let's try to save this form to your hard disk. Select the Save As option from the form window's File menu. Choose HTML Only file type. Now, load back this file to your browser, by any convenient way you use to load HTML files. Notice that one field has kept its entry, while the other one did not. You have just witnessed the power of the saveSnapshot Behavior. We explain next how to implement it.
There are a few changes you have to make in your Web page to be able to use persistence Behaviors. First, you have to add the following META tag:
<META NAME="save" CONTENT="snapshot">
Secondly, you need to define the saveSnapshot Behavior as a built-in one:
<STYLE>
.saveSnapshot{behavior:url(#_IE_);}
</STYLE>
You can persist your form in any level you want. First, you can persist individual entries, as we have just demonstrated. Here is the body of our example:
<BODY>
<FORM>
Enter a text you want to be persisted:
<INPUT TYPE="text" CLASS="saveSnapshot" ID="inputPersistText">
Enter a text you don't want to be persisted:
<INPUT TYPE="text">
</FORM>
</BODY>
In order to enable a persistent element, you need to specify its Behavior via the CLASS attribute, and assign an ID to the element. Notice how easy it is to implement this persistence. You don't have to explicitly define attributes and store data in them. It's all being taken care of by the saveSnapshot Behavior.
You can also persist an entire form by assigning the saveSnapshot Behavior to the FORM element:
<BODY>
<FORM> CLASS="saveSnapshot" ID="inputPersistText">
Enter a text you want to be persisted:
<INPUT TYPE="text">
Enter another text you want to be persisted:
<INPUT TYPE="text">
</FORM>
</BODY>
The third element you can hard-disk persist is form data in a script block. Only variables will be persisted. Comments, functions, and object such as arrays are not included. Let's take our previous example and modify it to persist a variable:
<BODY>
<SCRIPT CLASS="saveSnapshot" ID="persistentScript">
var persistentVariable;
</SCRIPT>
<FORM>
Enter a text you want to save:
<INPUT TYPE="text" ID="inputText">
Click to save:
<INPUT TYPE="button" VALUE="save" onclick="persistentVariable=inputText.value">
Click to load:
<INPUT TYPE="button" VALUE="load" onclick="inputText.value=persistentVariable">
</FORM>
</BODY>
Here, the only persistent element is the persistentVariable variable, or any variable put inside the persistentScript script. We ask the user to enter some text and then click a button to save it in the persistent variable. When the user saves the file onto his or her hard disk and then reload it, clicking on the "load" button will refresh the form entry with the persistent variable. To be convinced, play around with the text entry field and do not save it. When you reload the file from disk, you will extract the text you had explicitly saved and not the one last entered.
Notice we have not used our Connect Three game example to demonstrate the saveSnapshot Behavior. The reason is that this behavior is targeted to support FORM elements only, as opposed to out IMG elements in our board game.
  
| 
