中午休息時,沒有睡意,沒事寫了個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 });

?最后, 如果你感興趣, 可以下載此插件(點擊下載formStorage.zip), 解壓后, 直接運行里面的test.html即可, 源碼沒有壓縮. 因為時間較短, 或許有不夠完善的地方,? 歡迎留言討論.

轉載于:https://www.cnblogs.com/AndyWithPassion/archive/2012/01/18/jQuery_form_storage.html

總結

以上是生活随笔為你收集整理的发布一个jQuery插件:formStorage的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。