发布一个jQuery插件:formStorage

中午休息时,没有睡意,没事写了个jquery插件:formStorage.

原理很简单,通过本地存储机制(userData或者localStorage),存储表单中元素的状态到本地. 需要时可以把所存储的状态还原到表单元素上.

其中也用了json数据格式, 之前想对插件中所需的功能,从零开始写,但是觉得太冗余,没必要.就基于另外2个plugin现实.

分别是:jquery.json 和 jStorage. 这两个插件本身实用小巧, api简单易用, 其中jStorage在老一点的浏览器(不支持原生JSON操作)中需要用到jquery.json或者json2

formStorage对jQuery对象扩展了3个方法, 对非form标签无效.

存储时调用: $('#myform').formStore(/*excludes*/), 此方法可以传入一个包含表单元素id的数组,指定哪些元素状态不需要存储

还原时调用: $('#myform').formRestore()

清除存储调用: $('#myform').destroyStore(), 之后在调用formRestore将不起作用, 因为对应的本地存储数据已经删除

NOTE: 为了还原时能定位元素, form和其表单元素都需要给予id, 保存时以form的id做为key, 所有表单元素的状态组织成一个json串做为value.

其中input的type如果为button, file, submit, reset, password, image中的其中一个, 该标签的状态不会被存储. 如果表单中有textarea,而且文本内容较大,

不建议实用, 尤其在IE6,7中.

下面是一张各个浏览器本地存储容量的参考图(来自jStorage的主页):

好吧, 貌似图里面的浏览器老了点...

下面是个简单的实例:

 1 <form id="myform" action="">
 2         <input id="name" name="name" type="text" value="" />
 3         <input id="password" name="pwd" type="password" value="" />
 4         
 5         <input type="checkbox" name="checkname" id="check1" value="checkvalue1" />
 6         <input type="checkbox" name="checkname" id="check2" value="checkvalue2" />
 7         
 8         <input type="radio" name="radioname" id="radio1" value="radiovalue1" />
 9         <input type="radio" name="radioname" id="radio2" value="radiovalue2" />
10         
11         <select name="selectoptions" id="select1">
12             <option value="option0">option0</option>
13             <option value="option1">option1</option>
14             <option value="option2">option2</option>
15             <option value="option3">option3</option>
16         </select>
17         
18         <textarea name="area" id="area" cols="30" rows="10">
19         </textarea>
20         
21         <button type="button" id="store">store</button>
22         <button type="button" id="restore">restore</button>
23         <button type="button" id="destroy">destroy</button>
24     </form>

实例中对应的js如下:

1 $('#store, #restore, #destroy').on('click', function() {
2     if(this.id == 'store')
3         $('#myform').formStore();
4     else if(this.id == 'restore')
5         $('#myform').formRestore();
6     else 
7         $('#myform').destroyStore();
8 });