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

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

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

下面是个简单的实例:

代码如下:

<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即可, 源码没有压缩. 因为时间较短, 或许有不够完善的地方, 欢迎留言讨论.

赞 (0)

相关推荐

  • 使用jQuery时Form表单元素ID和name命名大忌

    在做自己的毕业设计的时候将自己的表单元素ID和name命名为了nodeName: 复制代码 代码如下: <form> <input type="text" name="nodeName" id="nodeName"> ........... </form> 在chrome浏览器下可以看到这么个错误: Uncaught TypeError: Object #<HTMLInputElement> has

  • Jquery 组合form元素为json格式,asp.net反序列化

    作者:敖士伟 Email:ikmb@163.com 转载注明作者 说明: 1.js根据表单元素class属性,把表单元素的name和value组合为json格式;用表单元素class属性可以针对性地组合JSON数据. 2.后端ASP.NET用JavaScriptSerializer反序列化为对象实列. 3.好处:简化了前端数据读取与后端数据赋值. 复制代码 代码如下: function GetJSONStr(class_name) { var a = []; //文本框 $("." +

  • jquery获取form表单input元素值的简单实例

    一般取值方法 $("#id").val(); $("#id").attr("value"); //其中value是元素的属性名如<s:textfield  id="cifName" key="cifName"   name="#request.consBean.cifName" />的id,key,name属性.取到的值是属性后对应双引号里面的字符. function sav

  • javascript jquery对form元素的常见操作详解

    1.下拉框 select : 移除option $("#ID option").each(function(){ if($(this).val() == 111){ $(this).remove(); } }); 添加option $("<option value='111'>UPS Ground</option>").appendTo($("#ID")); 取得下拉选单的选取值 //取下拉選中的文本 $('#testSe

  • jQuery实现form表单元素序列化为json对象的方法

    jQuery实现form表单元素序列化为json对象的方法

    本文实例讲述了jQuery实现form表单元素序列化为json对象的方法.分享给大家供大家参考,具体如下: 这段代码序列化form表单元素为json对象: <!Doctype html> <html xmlns=http://www.w3.org/1999/xhtml> <head> <title>jQuery扩展--form序列化到json对象</title> <meta http-equiv=Content-Type content=&

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

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

    原理很简单,通过本地存储机制(userData或者localStorage),存储表单中元素的状态到本地. 需要时可以把所存储的状态还原到表单元素上. 其中也用了json数据格式, 之前想对插件中所需的功能,从零开始写,但是觉得太冗余,没必要.就基于另外2个plugin现实. 分别是:jquery.json 和 jStorage. 这两个插件本身实用小巧, api简单易用, 其中jStorage在老一点的浏览器(不支持原生JSON操作)中需要用到jquery.json或者json2 formSt

  • 基于jQuery实现一个marquee无缝滚动的插件

    基于jQuery,实现一个marquee无缝滚动的插件,已经发布到 git.oschina.net,演示稍后更新(更新到 http://git.oschina.net/mqycn/jQueryMarquee ). 代码如下: /** * 类库名称:jQuery.marquee * 实现功能:基于 jquery 实现的 marquee 无缝滚动插件 * 作者主页:http://www.miaoqiyuan.cn/ * 联系邮箱:mqycn@126.com * 使用说明:http://www.mia

  • qTip 基于JQuery的Tooltip插件[兼容性好]

    qTip 基于JQuery的Tooltip插件[兼容性好]

    主页:http://craigsworks.com/projects/qtip/ 下载:http://craigsworks.com/projects/qtip/download 示例:http://craigsworks.com/projects/qtip/ qTip是一个基于JQuery的Tooltip插件.它几乎支持所有的主流浏览器例如: Internet Explorer 6.0+ Firefox 2.0+ Opera 9.0+ Safari 3.0+ Google Chrome 1.0

  • JQuery validate 验证一个单独的表单元素实例

    前提:已引入JQuery validate插件 function validateOneElement() { //验证id="form1"的表单中id="elementId"的表单元素 $("#form1").validate().element($("#elementId")) } 以上这篇JQuery validate 验证一个单独的表单元素实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们

  • 基于jQuery.Hz2Py.js插件实现的汉字转拼音特效

    可以实现基于jQuery实现汉字转换成拼音代码.这是一款基于jQuery.Hz2Py.js插件实现的汉字转拼音特效.插件自行下载.使用方法如下(注意修改jq的引入路径). <html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>基于jQuery实现汉字转换成拼音代码</title> <

  • jquery实现一个简单的表单验证实例

    表单验证在网站开发过程中经常遇到,我们可以使用服务器端语言验证,也可以使用客户端语言来验证.本文章向大家介绍jquery客户端验证表单的一个简单实例.实例仅作参考. <body> <form method="post" action=""> <div class="int"> <label for="username">用户名:</label> <!-- 为每个

  • 基于jQuery Bar Indicator 插件实现进度条展示效果

    基于jQuery Bar Indicator 插件实现进度条展示效果

    Bar Indicator是一款基于jQuery的进度条数据展示插件,它可应用于数据统计展示.投票统计以及任务进度等诸多场景中.它使用简单.选项丰富,几乎可以满足用户所有基于进度条的WEB设计需求,本文将结合实例给大家讲解Bar Indicator的使用. 查看演示 下载源码 HTML 首先加载jQuery和Bar Indicator相关js文件以及css文件. <link href="bi-style.css" rel="stylesheet" />

  • jQuery中clone()函数实现表单中增加和减少输入项

    jQuery中clone()函数实现表单中增加和减少输入项

    之前一直没有深入了解到clone()函数的方法,所以对应表单中增加和减少输入项一直使用如: var copy_html=$(选择器).html(); alert(copy_html); 问题在于得出的copy_html直接是HTML内容代码,未经过object封装,而使用: var copy_html=$(选择器).clone(); alert(copy_html); 得出未object对象类型,若$(选择器)包含了某个触发,如 onclick,如果想copy_html继续沿用onclick方法

  • 基于jquery的一个图片hover的插件

    先来看看使用方法. 演示地址 http://demo.jb51.net/js/jCutter_jquery/demo.htmHTML文件中这样写: 复制代码 代码如下: <div class="jcutter"> <img src="1.jpg" alt=""> <div class="jcutter-content"> 这是点开后的页面的内容 </div> </div&g

  • jqPlot 基于jquery的画图插件

    前边也讲过一个基于java的图形报表,功能及外观也不错,但存在通用性的问题.所以我们来学一个具有易用性+兼容性+可扩展性的js图表插件. jqPlot是一款基于jquery类库的图标绘制插件.通过jqPlot可以再网页中绘制线状.柱状.饼状等多种样式图表.而且,jqPlot具有插件可扩展性(Pluggability),你可以编写自己的图表样式. 官方地址:http://www.jqplot.com/ 功能概述: 有多种图表样式可供选择 可以自定义日期轴线 可设置旋转轴文字 自动计算趋势线 工具条

随机推荐