Release a jquery plug-in: formstorage

At noon, I was not sleepy. I had nothing to do with writing a jquery plug-in: formstorage.

The principle is very simple. Through the local storage mechanism (userdata or localstorage), the state of elements in the form is stored locally. You can restore the stored state to the form element when necessary.

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:

<Form ID = "myform" Action = ""> <input id = "name" name = "name" type = "text" value = ""/> <input id =" password "name =" PWD "type =" password "value =" "/> <input type =" checkbox "name =" checkname "id =" check1 "value =" checkvalue1" /> <input type = "checkbox" name = "checkname" id = "check2" value = "checkvalue2"/> <input type = "radio" name = "radioname" id = "radio1" value = "radiovalue1"/> <input type = "radio" name = "radioname" id = "Radio2" value = "radiovalue2"/> <select name = "selectoptions "id =" select1 "> <option value =" option0 "> option0 </option> <option value =" option1 "> option1 </option> <option value =" option2"> option2 </option> <option value = "option3"> option3 </option> </SELECT> <textarea name = "area" id = "area" Cols = "30" rows = "10"> </textarea> <button type = "button" id = "Store"> store </button> <button type = "button" id = "Restore"> restore </button> <button type = "button" id = "Destroy"> destroy </button> </form>

The corresponding Js in the instance 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.zip). After decompression, run test.html directly, and the source code is not compressed. because of the short time, there may be incomplete content, so leave a message to discuss it.