Home > Others

Using UserData to implement client-side saving form data _javascript skills in JS

Source: Internet
Author: User
Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

In fact, we can use the UserData behavior in the Microsoft DHTML default behavior to implement this function.

Because a lot of netizens ask this kind of question, tidy up a bit, and provide three examples. The following is an introduction to the use of this behavior:

UserData behavior (UserData Behavior):

1. Description:
UserData behavior saves data by writing data to a UserData store (UserData store), UserData can save data in XML format on the client computer, if you are using Windows 2000 or Windows XP, is saved under the C:\Documents and Settings\liming\userdata\ folder (if the operating system is not installed on C, then c should be the partition where the operating system is located).

The data will always exist unless you artificially delete or use a script to set the expiration period of the data.

UserData behavior provides a more dynamic and larger-capacity data structure than cookies. The size of the UserData store data per page can be up to KB, and each domain name can reach 640 KB.
The UserData behavior assigns UserData storage to each object by sessions. Use the Save and load methods to store the UserData store data in cache. Once the UserData store is saved, even if IE is closed or refreshed, the next time the page is entered, the data can be reloaded without loss.
For security reasons, the same protocol uses the same folder to save UserData store data.
For security reasons, a UserData store are available only in the same directory and with the same protocol to used The store.

Using the Save and load methods after applying the UserData behavior on the HTML, head, title, and style tags will make an error.
Setting the UserData behavior (proposed) class on the HTML, head, TITLE, or STYLE object causes a error when the Save or The Load method is called.

The following style must be declared within a row or in the head section of the document:

<STYLE>
. userData {Behavior:url (#default #userdata);}
</STYLE>

UserData behavior available for Microsoft? Win32 and UNIX platforms, IE version 5.0 above, does not support Netscape.

2. Grammar:
HTML <element style= "Behavior:url (' #default #userdata ')" id=sid>
Script object.style.behavior = "url (' #default #userdata ')"
Object.addbehavior ("#default #userdata")
Note: The SID parameter is a unique ID that can describe the tag. The ID is optional, but if so, you can easily control the tag in the script.

3. Members:

Expires
Sets or gets the expiration date for saving data using the UserData behavior.
Scripting Syntax: Object id.expires = parameter
The parameter is a string that represents the expiration date in UTC (Universal Time Coordinate, world-adjusted) format. This property can read and write without default values. The browser compares this date with the current date, and if it expires, the data is automatically invalidated.

GetAttribute ()
Gets the specified property value.

Load (store name)
Loads the stored object data from the UserData store.

RemoveAttribute ()
Deletes the specified property value from the object.

Save (storage area name)
The object data is deposited into a userdata storage area.

SetAttribute ()
Sets the specified property value.

XmlDocument
Gets the XML DOM reference that stores the object's data.

You can view MSDN (http://msdn.microsoft.com) with specific usage
4, example
Example One: Application of text box tags (Microsoft)

The code is as follows:

<textarea id="runcode5062"><HTML> <HEAD> <STYLE>. userData {behavior:url (#default #userdata);} </STYLE> <SCRIPT> function Fnsaveinput () {var opersist=opersistform.opersistinput; Opersist.setattribute ("Spersist", Opersist.value); Store Opersist.value as Spersist attribute Opersist.save ("Oxmlbranch"); stored in the UserData storage} function Fnloadinput () {var opersist=opersistform.opersistinput named Oxmlbranch; Opersist.load ("Oxmlbranch"); Load in the UserData storage area named Oxmlbranch opersist.value=opersist.getattribute ("spersist"); Assign the Spersist property to Opersist.value} </SCRIPT> </HEAD> <BODY> <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> </BODY> </HTML></textarea>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]

Example Two: application of checkbox markers

The code is as follows:

<style> userData {behavior:url (#default #userdata);} </style> <input type=checkbox id=chkbox1 class=userdata> <script> var obj=document.all.chkbox1; Obj.attachevent (' onclick ', savechecked) function savechecked () {Obj.setattribute ("Bcheckedvalue", obj.checked); Obj.save ("Ochkvalue"); } window.attachevent (' onload ', loadchecked) function loadchecked () {obj.load ("Ochkvalue"); var chk= (Obj.getattribute ("bcheckedvalue") = = "true")? True:false; Obj.checked=chk; } </script>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]

example Three: Application of the Select tag

The code is as follows:

<style> userData {behavior:url (#default #userdata); </style> <select id= "Select1" class= "UserData" > <option>option1</option> <option> option2</option> <option>option3</option> <option>option4</option> </select> <script> var Obj=document.all.select1; Obj.attachevent (' onchange ', saveselectedindex) function Saveselectedindex () {Obj.setattribute ("Sselectvalue"), Obj.selectedindex); Obj.save ("Osltindex"); } window.attachevent (' onload ', loadselectedindex) function Loadselectedindex () {obj.load ("Osltindex"); Obj.selectedindex=obj.getattribute ("Sselectvalue"); } </script>
[ctrl+a All selected note: If you need to introduce external JS need to refresh to perform]

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More