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 相关文章推荐
json 实例详细说明教程
Oct 31 Javascript
Js 时间间隔计算的函数(间隔天数)
Nov 15 Javascript
取消选中单选框radio的三种方式示例介绍
Dec 23 Javascript
非jQuery实现照片散落桌子上,单击放大的LightBox效果
Nov 28 Javascript
非常棒的jQuery图片轮播效果
Apr 17 Javascript
jQuery插件HighCharts绘制的基本折线图效果示例【附demo源码下载】
Mar 07 Javascript
express默认日志组件morgan的方法
Apr 05 Javascript
浅谈webpack devtool里的7种SourceMap模式
Jan 14 Javascript
JavaScript模块管理的简单实现方式详解
Jun 15 Javascript
微信小程序下拉框搜索功能的实现方法
Jul 31 Javascript
iSlider手机端图片滑动切换插件使用详解
Dec 24 Javascript
原生js实现自定义难度的扫雷游戏
Jan 22 Javascript
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 什么是PEAR?(第三篇)
2009/03/19 PHP
PHP中的一些常用函数收集
2015/05/26 PHP
Laravel框架实现的记录SQL日志功能示例
2018/06/19 PHP
php实现对文件压缩简单的方法
2019/09/29 PHP
laravel 根据不同组织加载不同视图的实现
2019/10/14 PHP
javascript innerHTML、outerHTML、innerText、outerText的区别
2008/11/24 Javascript
JavaScript 字符编码规则
2009/05/04 Javascript
JavaScript 权威指南(第四版) 读书笔记
2009/08/11 Javascript
javascript 时间比较实现代码
2009/10/28 Javascript
JavaScript 继承机制的实现(待续)
2010/05/18 Javascript
jQuery1.3.2 升级到jQuery1.4.4需要修改的地方
2011/01/06 Javascript
使用JS实现图片展示瀑布流效果的实例代码
2016/09/12 Javascript
教你5分钟学会用requirejs(必看篇)
2017/07/25 Javascript
React-Native使用Mobx实现购物车功能
2017/09/14 Javascript
Vue.js实现的表格增加删除demo示例
2018/05/22 Javascript
关于vue编译版本引入的问题的解决
2018/09/17 Javascript
用vscode开发vue应用的方法步骤
2019/05/06 Javascript
Node.JS在命令行中检查Chrome浏览器是否安装并打开指定网址
2019/05/21 Javascript
微信小程序发布新版本时自动提示用户更新的方法
2019/06/07 Javascript
js 数据类型判断的方法
2020/12/03 Javascript
利用Python中SocketServer 实现客户端与服务器间非阻塞通信
2016/12/15 Python
python中解析json格式文件的方法示例
2017/05/03 Python
Python实现读写INI配置文件的方法示例
2018/06/09 Python
python用BeautifulSoup库简单爬虫实例分析
2018/07/30 Python
对python生成业务报表的实例详解
2019/02/03 Python
MyHeritage美国:家族史研究和DNA测试的领先服务
2019/05/27 全球购物
在SQL Server中创建数据库主要有那种方式
2013/09/10 面试题
师范生实习的个人自我鉴定
2013/10/20 职场文书
老干部工作先进事迹
2014/08/17 职场文书
租赁协议书
2015/01/27 职场文书
实习介绍信范文
2015/05/05 职场文书
民事调解书范文
2015/05/20 职场文书
婚礼嘉宾致辞
2015/07/28 职场文书
读《瓦尔登湖》有感:每个人都需要一个瓦尔登湖
2019/10/17 职场文书
MySQL如何构建数据表索引
2021/05/13 MySQL
ES6 解构赋值的原理及运用
2021/05/25 Javascript