JQUERY表单暂存功能插件分享


Posted in Javascript onFebruary 23, 2016

jquery.formLocalStorage 是一个实现通用表单暂存功能的jquery插件

原理:

监控表单域变化,并使用HTML5 WebStorage中的localStorage来存储这些有变化的表单域的值,并在从新加载表单时将存储的值载入回表单域中,从而实现暂存功能。

功能特点:

1.不使用服务器端存储,节省服务器资源。

2.代码简练,使用默认配置的话只需一小段代码 $("#your_form_id").formLocalStorage(); 即可搞定,无需写一大坨服务器端逻辑。

3.丰富的配置项与默认值,通过配置项可以自定义暂存内容的样式,暂存加载完毕、存储完毕与删除完毕后的回调事件以及暂存的存储命名规则,也可使用默认值从而减少过度的配置工作。

用法:

1.使用默认配置:

$("#your_form_id").formLocalStorage();

2.使用自定义配置:

$("#your_form_id").formLocalStorage({
  storage_name_perfix : 'your_storage_name_perfix', //自定义暂存存储的命名前缀
  storage_events : 'click' //自定义暂存触发事件
});

已知的问题:

1.有些动态写入表单项的内容无法监测到,也不能暂存。

2.默认的storage_name_perfix是this.context.URL + form_selector + "@",在提交后若this.context.URL发生变化则会定位不到暂存,最好使用别的唯一值作为默认storage_name_perfix

插件下载  http://xiazai.3water.com/201602/yuanma/jquery.formLocalStorage(3water.com).zip

Javascript 相关文章推荐
JQUERY 浏览器判断实现函数
Aug 20 Javascript
ext combox 下拉框不出现自动提示,自动选中的解决方法
Feb 24 Javascript
jquery 学习之二 属性(html()与html(val))
Nov 25 Javascript
分享10篇优秀的jQuery幻灯片制作教程及应用案例
Apr 16 Javascript
javascript实现在某个元素上阻止鼠标右键事件的方法和实例
Aug 12 Javascript
jQuery中next()方法用法实例
Jan 07 Javascript
浅谈JavaScript中的对象及Promise对象的实现
Nov 15 Javascript
javascript实现二级级联菜单的简单制作
Nov 19 Javascript
jQuery使用contains过滤器实现精确匹配方法详解
Feb 25 Javascript
jQuery实现控制文字内容溢出用省略号(…)表示的方法
Feb 26 Javascript
vue-cli项目中使用Mockjs详解
May 14 Javascript
webpack+vue-cli项目中引入外部非模块格式js的方法
Sep 28 Javascript
JavaScript简单实现鼠标移动切换图片的方法
Feb 23 #Javascript
jQuery实现返回顶部功能
Feb 23 #Javascript
JavaScript添加随滚动条滚动窗体的方法
Feb 23 #Javascript
理解javascript定时器中的单线程
Feb 23 #Javascript
如何使用PHP+jQuery+MySQL实现异步加载ECharts地图数据(附源码下载)
Feb 23 #Javascript
教你如何终止JQUERY的$.AJAX请求
Feb 23 #Javascript
JQUERY的AJAX请求缓存里的数据问题处理
Feb 23 #Javascript
You might like
批量修改RAR文件注释的php代码
2010/11/20 PHP
PHP新手用的Insert和Update语句构造类
2012/03/31 PHP
执行、获取远程代码返回:file_get_contents 超时处理的问题详解
2013/06/25 PHP
Laravel框架路由配置总结、设置技巧大全
2014/09/03 PHP
初识ThinkPHP控制器
2016/04/07 PHP
PHP简单实现无限级分类的方法
2016/05/13 PHP
php阳历转农历优化版
2016/08/08 PHP
extJs 常用到的增,删,改,查操作代码
2009/12/28 Javascript
JS数组去重与取重的示例代码
2014/01/24 Javascript
JavaScript严格模式禁用With语句的原因
2014/10/20 Javascript
浅谈javascript语法和定时函数
2015/05/03 Javascript
jQuery实现hover合成事件的方法
2015/08/06 Javascript
javascript中eval和with用法实例总结
2015/11/30 Javascript
使用Bootstrap typeahead插件实现搜索框自动补全的方法
2016/07/07 Javascript
AngularJS利用Controller完成URL跳转
2016/08/09 Javascript
纯js实现手风琴效果代码
2020/04/17 Javascript
jquery.uploadifive插件怎么解决上传限制图片或文件大小问题
2017/05/08 jQuery
angular4中关于表单的校验示例
2017/10/16 Javascript
浅谈Webpack自动化构建实践指南
2017/12/18 Javascript
JS验证输入的是否是数字及保留几位小数问题
2018/05/09 Javascript
JavaScript实现动态生成表格
2020/08/02 Javascript
[04:40]2016国际邀请赛中国区预选赛全程TOP10镜头集锦
2016/07/01 DOTA
python dict 字典 以及 赋值 引用的一些实例(详解)
2017/01/20 Python
Python简单获取网卡名称及其IP地址的方法【基于psutil模块】
2018/05/24 Python
Python实现的爬取百度贴吧图片功能完整示例
2019/05/10 Python
python增加图像对比度的方法
2019/07/12 Python
在SQLite-Python中实现返回、查询中文字段的方法
2019/07/17 Python
python标记语句块使用方法总结
2019/08/05 Python
python实现滑雪游戏
2020/02/22 Python
python3 实现口罩抽签的功能
2020/03/11 Python
python使用QQ邮箱实现自动发送邮件
2020/06/22 Python
工地宣传标语
2014/06/18 职场文书
李白故里导游词
2015/02/12 职场文书
python实现高效的遗传算法
2021/04/07 Python
python numpy中setdiff1d的用法说明
2021/04/22 Python
关于html选择框创建占位符的问题
2021/06/09 HTML / CSS