formStorage 基于jquery的一个插件(存储表单中元素的状态到本地)


Posted in Javascript onJanuary 20, 2012

原理很简单,通过本地存储机制(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的主页):

formStorage 基于jquery的一个插件(存储表单中元素的状态到本地)

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

下面是个简单的实例:

<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>

实例中对应的js如下:
$('#store, #restore, #destroy').on('click', function() { 
if(this.id == 'store') 
$('#myform').formStore(); 
else if(this.id == 'restore') 
$('#myform').formRestore(); 
else 
$('#myform').destroyStore(); 
});

最后, 如果你感兴趣, 可以下载此插件(点击下载formStorage), 解压后, 直接运行里面的test.html即可, 源码没有压缩. 因为时间较短, 或许有不够完善的地方, 欢迎留言讨论.
Javascript 相关文章推荐
javascript中最常用的继承模式 组合继承
Aug 12 Javascript
javascript event 事件解析
Jan 31 Javascript
JavaScript基本编码模式小结
May 23 Javascript
asp.net中System.Timers.Timer的使用方法
Mar 20 Javascript
onmouseover和onmouseout的一些问题思考
Aug 14 Javascript
js 时间格式与时间戳的相互转换示例代码
Dec 25 Javascript
基于javascript代码检测访问网页的浏览器呈现引擎、平台、Windows操作系统、移动设备和游戏系统
Dec 03 Javascript
基于bootstrap的文件上传控件bootstrap fileinput
Dec 23 Javascript
AngularJS基于provider实现全局变量的读取和赋值方法
Jun 28 Javascript
使用Vue父子组件通信实现todolist的功能示例代码
Apr 11 Javascript
JavaScript实现烟花绽放动画效果
Aug 04 Javascript
Vue中foreach数组与js中遍历数组的写法说明
Jun 05 Vue.js
json的前台操作和后台操作实现代码
Jan 20 #Javascript
Prototype源码浅析 Enumerable部分(二)
Jan 18 #Javascript
JS中的public和private对象,即static修饰符
Jan 18 #Javascript
DOM 中的事件处理介绍
Jan 18 #Javascript
深入理解JavaScript系列(13) This? Yes,this!
Jan 18 #Javascript
JavaScript中常用的运算符小结
Jan 18 #Javascript
jQuery LigerUI 使用教程表格篇(1)
Jan 18 #Javascript
You might like
PHP导出EXCEL快速开发指南--PHPEXCEL的使用详解
2013/06/03 PHP
zend framework框架中url大小写问题解决方法
2014/08/19 PHP
PHP获取毫秒级时间戳的方法
2015/04/15 PHP
php自定义时间转换函数示例
2016/12/07 PHP
详解PHP文件的自动加载(autoloading)
2018/02/04 PHP
php libevent 功能与使用方法详解
2020/03/04 PHP
YII2框架使用控制台命令的方法分析
2020/03/18 PHP
理清apply(),call()的区别和关系
2011/08/14 Javascript
在jQuery ajax中按钮button和submit的区别分析
2012/10/07 Javascript
JS遍历Json字符串中键值对先转成JSON对象再遍历
2014/08/15 Javascript
用原生JS获取CLASS对象(很简单实用)
2014/10/15 Javascript
javascript面向对象之共享成员属性与方法及prototype关键字用法
2015/01/13 Javascript
基于BootStrap实现局部刷新分页实例代码
2016/08/08 Javascript
解决URL地址中的中文乱码问题的办法
2017/02/10 Javascript
JavaScript正则表达式校验与递归函数实际应用实例解析
2017/08/04 Javascript
基于JS递归函数细化认识及实用实例(推荐)
2017/08/07 Javascript
ES6使用Set数据结构实现数组的交集、并集、差集功能示例
2017/10/31 Javascript
windows实现npm和cnpm安装步骤
2019/10/24 Javascript
jquery 插件重新绑定的处理方法分析
2019/11/23 jQuery
jquery实现直播弹幕效果
2019/11/28 jQuery
react国际化化插件react-i18n-auto使用详解
2020/03/31 Javascript
Python3.6简单操作Mysql数据库
2017/09/12 Python
python登录并爬取淘宝信息代码示例
2017/12/09 Python
python django model联合主键的例子
2019/08/06 Python
python实现文件批量编码转换及注意事项
2019/10/14 Python
python 协程 gevent原理与用法分析
2019/11/22 Python
python中pyplot基础图标函数整理
2020/11/10 Python
HTML5学习笔记之History API
2015/02/26 HTML / CSS
39美元购买一副眼镜或太阳镜:39DollarGlasses.com
2018/06/17 全球购物
冰淇淋开店创业计划书
2014/02/01 职场文书
2014国庆节幼儿园亲子活动方案
2014/09/16 职场文书
单方离婚协议书范本(2014版)
2014/09/30 职场文书
工作简报格式范文
2015/07/21 职场文书
我对PyTorch dataloader里的shuffle=True的理解
2021/05/20 Python
USB TYPE-C 或将成为所有智能手机充电标准
2022/04/21 数码科技
LyScript实现绕过反调试保护的示例详解
2022/08/14 Python