formStorage 基于jquery的一個(gè)插件(存儲(chǔ)表單中元素的狀態(tài)到本地)
原理很簡(jiǎn)單,通過(guò)本地存儲(chǔ)機(jī)制(userData或者localStorage),存儲(chǔ)表單中元素的狀態(tài)到本地. 需要時(shí)可以把所存儲(chǔ)的狀態(tài)還原到表單元素上.
其中也用了json數(shù)據(jù)格式, 之前想對(duì)插件中所需的功能,從零開(kāi)始寫(xiě),但是覺(jué)得太冗余,沒(méi)必要.就基于另外2個(gè)plugin現(xiàn)實(shí).
分別是:jquery.json 和 jStorage. 這兩個(gè)插件本身實(shí)用小巧, api簡(jiǎn)單易用, 其中jStorage在老一點(diǎn)的瀏覽器(不支持原生JSON操作)中需要用到j(luò)query.json或者json2
formStorage對(duì)jQuery對(duì)象擴(kuò)展了3個(gè)方法, 對(duì)非form標(biāo)簽無(wú)效.
存儲(chǔ)時(shí)調(diào)用: $('#myform').formStore(/*excludes*/), 此方法可以傳入一個(gè)包含表單元素id的數(shù)組,指定哪些元素狀態(tài)不需要存儲(chǔ)
還原時(shí)調(diào)用: $('#myform').formRestore()
清除存儲(chǔ)調(diào)用: $('#myform').destroyStore(), 之后在調(diào)用formRestore將不起作用, 因?yàn)閷?duì)應(yīng)的本地存儲(chǔ)數(shù)據(jù)已經(jīng)刪除
NOTE: 為了還原時(shí)能定位元素, form和其表單元素都需要給予id, 保存時(shí)以form的id做為key, 所有表單元素的狀態(tài)組織成一個(gè)json串做為value.
其中input的type如果為button, file, submit, reset, password, image中的其中一個(gè), 該標(biāo)簽的狀態(tài)不會(huì)被存儲(chǔ). 如果表單中有textarea,而且文本內(nèi)容較大,
不建議實(shí)用, 尤其在IE6,7中.
下面是一張各個(gè)瀏覽器本地存儲(chǔ)容量的參考圖(來(lái)自jStorage的主頁(yè)):
好吧, 貌似圖里面的瀏覽器老了點(diǎn)...
下面是個(gè)簡(jiǎn)單的實(shí)例:
<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>
實(shí)例中對(duì)應(yīng)的js如下:
$('#store, #restore, #destroy').on('click', function() {
if(this.id == 'store')
$('#myform').formStore();
else if(this.id == 'restore')
$('#myform').formRestore();
else
$('#myform').destroyStore();
});
最后, 如果你感興趣, 可以下載此插件(點(diǎn)擊下載formStorage), 解壓后, 直接運(yùn)行里面的test.html即可, 源碼沒(méi)有壓縮. 因?yàn)闀r(shí)間較短, 或許有不夠完善的地方, 歡迎留言討論.
相關(guān)文章
jquery精度計(jì)算代碼 jquery指定精確小數(shù)位
這篇文章主要為大家詳細(xì)介紹了jquery精度計(jì)算代碼,jquery指定精確小數(shù)位,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-02-02jQuery圖片預(yù)加載 等比縮放實(shí)現(xiàn)代碼
jQuery圖片預(yù)加載 等比縮放實(shí)現(xiàn)代碼,需要的朋友可以參考下。2011-10-10使用jquery選擇器如何獲取父級(jí)元素、同級(jí)元素、子元素
這篇文章主要介紹了使用jquery選擇器如何獲取父級(jí)元素、同級(jí)元素、子元素,需要的朋友可以參考下2014-05-05jquery中ready()函數(shù)執(zhí)行的時(shí)機(jī)和window的load事件比較
這篇文章主要介紹了jquery中ready()函數(shù)執(zhí)行的時(shí)機(jī)和window的load事件比較的相關(guān)資料,需要的朋友可以參考下2015-06-06jquery插件jquery.beforeafter.js實(shí)現(xiàn)左右拖拽分隔條對(duì)比圖片的方法
這篇文章主要介紹了jquery插件jquery.beforeafter.js實(shí)現(xiàn)左右拖拽分隔條對(duì)比圖片的方法,可實(shí)現(xiàn)圖片拖拽變換的功能,需要的朋友可以參考下2015-08-08騰訊與新浪的通過(guò)IP地址獲取當(dāng)前地理位置(省份)的接口
通過(guò)IP地址獲取當(dāng)前地理位置(省份)的接口,方便大家可以直接使用結(jié)合自己的系統(tǒng)。2010-07-07jQuery 循環(huán)遍歷改變a標(biāo)簽的href(實(shí)例講解)
下面小編就為大家?guī)?lái)一篇jQuery 循環(huán)遍歷改變a標(biāo)簽的href(實(shí)例講解)。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-07-07jquerymobile checkbox及時(shí)刷新才能獲取其準(zhǔn)確值
一般登錄的時(shí)候 都有個(gè)記住用戶(hù)名 記住密碼 的兩個(gè)checkbox 多選框用jquerymobile 做頁(yè)面 ,當(dāng)勾選checkbox 時(shí)總是不能獲取它正確的值2012-04-04