FormStorage is a jquery-based plug-in that stores the state of elements in a form to a local location. _ jquery

The principle is very simple. The local storage mechanism (userData or localStorage) is used to store the state of elements in the form to the local. when necessary, you can restore the stored state to the form element. The principle is very simple. Through the local storage mechanism (userData or localStorage), the state of the elements in the form is stored locally. if necessary, you can restore the stored state to the form element.

The json data format is also used. I want to write the functions required in the plug-in from scratch, but I think it is too redundant and unnecessary. It is based on the other two plug-ins.

They are: jquery. json and jStorage. these two plug-ins are small and practical, and the api is simple and easy to use. jStorage uses jquery in older browsers (which do not support native JSON operations. json or json2

FormStorage extends three methods to the jQuery object and is invalid for non-form labels.

Storage call:$ ('# Myform'). formStore (/* excludes */),This method can be used to input an array containing the form Element id, specifying which element States do not need to be stored

Called during restoration:$ ('# Myform'). formRestore ()

Clear storage call:$ ('# Myform'). destroyStore (),After formRestore is called, the corresponding local storage data has been deleted.

NOTE:To locate elements during restoration, both form and form elements must be givenIdWhen saving, the form id is used as the key, and the status of all form elements is organized into a json string as the value.

If the input type is button, file, submit, reset, password, or image, the status of the tag will not be stored. If the form contains textarea, and the text content is large,

It is not recommended to use this function, especially in IE6 and 7.

The following is a reference image of the local storage capacity of each browser (from the jStorage homepage ):

Okay, it looks like the browser is a little old...

The following is a simple example:

The Code is as follows:

The corresponding js in the instance is as follows:

The Code is as follows:

$ ('# Store, # restore, # destroy'). on ('click', function (){
If (this. id = 'store ')
$ ('# Myform'). formStore ();
Else if (this. id = 'restore ')
$ ('# Myform'). formRestore ();
Else
$ ('# Myform'). destroyStore ();
});

Finally, if you are interested, you can download this plug-in (click to download formStorage), decompress it, and directly run test.html in it. The source code is not compressed. for a short period of time, it may be incomplete. Please leave a message for discussion.