saveSnapshot

HTML (DHTML)

previous page next page

saveSnapshot Behavior

Internet Development Index

Enables the object to persist data when a Web page is saved.

Syntax

XML <Prefix: CustomTag ID=sID STYLE="behavior:url('#default#saveSnapshot')" />
HTML <ELEMENT STYLE="behavior:url('#default#saveSnapshot')" ID=sID>
Scriptingobject.style.behavior = "url('#default#saveSnapshot')"
object.addBehavior ("#default#saveSnapshot")

Possible Values

PrefixPrefix that associates the CustomTag with an XML namespace. This prefix is set using the XMLNS attribute of the HTML tag.
CustomTagUser-defined tag.
sIDString that specifies a unique identifier for the object.

Members Table

The following table lists the members exposed by the saveSnapshot object. Click a tab on the left to choose the type of member you want to view.

Events

EventDescription
onsave Fires from a persisted element when the Web page is saved or bookmarked, or when the user navigates away from the page.

Remarks

The saveSnapshot behavior can persist form values, styles, dynamically updated content, and scripting variables when the user saves a Web page locally as Web Page, HTML Only.

security note Security Alert  Using this behavior incorrectly can compromise the security of your application. This behavior persists data as plain text in a saved Web page. Text is not encrypted and therefore not secure. Any application that has access to the drive where the page is saved has access to the data and can tamper with it. Therefore, it is recommended that you not persist sensitive data like credit card numbers. For more information, see Security Considerations: DHTML and Default Behaviors.

The saveSnapshot behavior cannot persist the body element and individual table elements, such as rows and cells.

The saveSnapshot behavior can persist the content of the script element if the element is assigned an ID and a CLASS. The saveSnapshot behavior can persist only string, Boolean, and integer variants. Comments, functions, and scripting objects, such as arrays, are stripped out. Persistent script elements with an external source write the variables into the persistent page from the source.

To use the saveSnapshot behavior, use a meta tag that identifies the type of persistence. 

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

The required style may be set inline or in the document header, as follows: 

   <STYLE>
.sSnapshot {behavior:url(#default#savesnapshot);}
</STYLE>

An ID is required for the object to persist correctly.

The saveSnapshot behavior is available as of Microsoft® Internet Explorer 5, in the Microsoft Win32® and Unix platforms.

Examples

The following examples show how to use the saveSnapshot behavior.

This example uses the saveSnapshot behavior to persist form data.

<HTML>
<HEAD>
<META NAME="save" CONTENT="history">
<STYLE>
.sSnapshot {behavior:url(#default#savesnapshot);}
</STYLE>
</HEAD>
<BODY>
<INPUT class=sSnapshot type=text id=oPersistInput>
</BODY>
</HTML>
This feature requires Microsoft® Internet Explorer 5 or later. Click the following icon to install the latest version. Then reload this page to view the sample.

This example uses the saveSnapshot behavior to persist an entire form in two ways: by setting the CLASS attribute of the input fields to "saveSnapshot", and by packaging the data into a string variable, sData, when the user clicks the Save From Data button.

<HTML>
<HEAD>
<META NAME="save" CONTENT="snapshot">
<STYLE>
.sSnapshot {behavior:url(#default#savesnapshot);}
</STYLE>
<SCRIPT CLASS="sSnapshot" id=oPersistScript>
var sData="";
</SCRIPT>
<SCRIPT>
function PersistArray(){
var sData="";
for(var i=0;i<oPersistForm.elements.length;i++){
if(oPersistForm.elements[i].type == "text"){
sData+=oPersistForm.elements[i].value + "|";
oPersistForm.elements[i].value="";
}
if(oPersistForm.elements[i].tagName == "SELECT"){
sData+="spamtype=" + oPersistForm.elements[i].selectedIndex;
oPersistForm.oSelSpam.selected=-1;
}
}
sPersistData=sData;
}
function RestoreArray(){
if(sPersistData!="~Empty~"){
collData=sPersistData.split("|");
for(var i=0;i<collData.length;i++){
if(collData[i].indexOf("spamtype=")==-1){
oPersistForm.elements[i].value=collData[i];
}
if(collData[i].indexOf("spamtype=")>=0){
oPersistForm.oSelSpam.selectedIndex=
collData[i].substring(
collData[i].indexOf("=")+1,collData[i].length
);
}
}
}
}
</SCRIPT>
</HEAD>
<BODY>
<FORM ID="oPersistForm">
<TABLE CLASS="oSampleStyle">
<TR><TD><LABEL FOR="oFirstName">First Name:</LABEL></TD>
<TD><INPUT CLASS="sSnapshot" TYPE="text" ID="oFirstName" SIZE=15></TD></TR>
<TR><TD><LABEL FOR="oSelSpam">Select Method of Spam:</LABEL></TD>
<TD>
<SELECT ID="oSelSpam">
<OPTION>E-mail<OPTION>Postal Mail<OPTION>Telemarketing
</SELECT></TD></TR>
:
</TABLE>
<INPUT TYPE="button"
VALUE="Save form data in script"
onclick="PersistArray()"
>
<INPUT TYPE="button"
VALUE="Restore data from script"
onclick="RestoreArray()"
>
</FORM>
</BODY>
</HTML>
This feature requires Microsoft® Internet Explorer 5 or later. Click the following icon to install the latest version. Then reload this page to view the sample.

Applies To

A, ACRONYM, ADDRESS, AREA, B, BIG, BLOCKQUOTE, BUTTON, CENTER, CITE, CODE, DD, DEL, DFN, DIR, DIV, DL, DT, EM, FONT, FORM, hn, HR, I, IMG, INPUT type=button, INPUT type=checkbox, INPUT type=file, INPUT type=hidden, INPUT type=image, INPUT type=radio, INPUT type=reset, INPUT type=submit, INPUT type=text, KBD, LABEL, LI, LISTING, MAP, MARQUEE, MENU, OBJECT, OL, P, PLAINTEXT, PRE, Q, S, SAMP, SCRIPT, SELECT, SMALL, SPAN, STRIKE, STRONG, SUB, SUP, TABLE, TEXTAREA, TT, U, UL, VAR, XMP

See Also

Introduction to DHTML Behaviors, Introduction to Persistence
previous page start next page