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 相关文章推荐
JavaScript 字符串处理函数使用小结
Dec 02 Javascript
javascript 兼容所有浏览器的DOM扩展功能
Aug 01 Javascript
获取内联和链接中的样式(js代码)
Apr 11 Javascript
javascript实现阻止iOS APP中的链接打开Safari浏览器
Jun 12 Javascript
直接在JS里创建JSON数据然后遍历使用
Jul 25 Javascript
JS实现随页面滚动显示/隐藏窗口固定位置元素
Feb 26 Javascript
利用jquery制作滚动到指定位置触发动画
Mar 26 Javascript
后端接收不到AngularJs中$http.post发送的数据原因分析及解决办法
Jul 05 Javascript
JS实现异步上传压缩图片
Apr 22 Javascript
微信小程序实现横向增长表格的方法
Jul 24 Javascript
详解 微信小程序开发框架(MINA)
May 17 Javascript
微信小程序自定义弹窗实现详解(可通用)
Jul 04 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
《PHP编程最快明白》第二讲 数字、浮点、布尔型、字符串和数组
2010/11/01 PHP
PHP采用get获取url汉字出现乱码的解决方法
2014/11/13 PHP
PHP数组与对象之间使用递归实现转换的方法
2015/06/24 PHP
PHP测试成功的邮件发送案例
2015/10/26 PHP
学习PHP session的传递方式
2016/06/15 PHP
php表单文件iframe异步上传实例讲解
2017/07/26 PHP
如何利用PHP实现上传图片功能详解
2020/09/24 PHP
PHP中的输出echo、print、printf、sprintf、print_r和var_dump的示例代码
2020/12/01 PHP
JavaScript 动态将数字金额转化为中文大写金额
2009/05/14 Javascript
javascript操作referer详细解析
2014/03/10 Javascript
js创建对象的区别示例介绍
2014/07/24 Javascript
Jquery对select的增、删、改、查操作
2015/02/06 Javascript
jQuery入门之层次选择器实例简析
2015/12/11 Javascript
JQuery标签页效果实例详解
2015/12/24 Javascript
详解nodejs 文本操作模块-fs模块(五)
2016/12/23 NodeJs
Bootstrap中datetimepicker使用小结
2016/12/28 Javascript
vue轮播图插件vue-concise-slider的使用
2018/03/13 Javascript
微信小程序购物车、父子组件传值及calc的注意事项总结
2018/11/14 Javascript
JS集合set类的实现与使用方法示例
2019/02/01 Javascript
微信小程序页面间跳转传参方式总结
2019/06/13 Javascript
vue中 v-for循环的用法详解
2020/02/19 Javascript
vue 使用 vue-pdf 实现pdf在线预览的示例代码
2020/04/26 Javascript
在Python中使用sort()方法进行排序的简单教程
2015/05/21 Python
Python实现查找二叉搜索树第k大的节点功能示例
2019/01/24 Python
python用类实现文章敏感词的过滤方法示例
2019/10/27 Python
Python帮你识破双11的套路
2019/11/11 Python
Pytorch在NLP中的简单应用详解
2020/01/08 Python
python爬虫中的url下载器用法详解
2020/11/30 Python
python 通过pip freeze、dowload打离线包及自动安装的过程详解(适用于保密的离线环境
2020/12/14 Python
css3 矩阵的使用详解
2018/03/20 HTML / CSS
英国蛋糕装饰用品一站式商店:Craft Company
2019/03/18 全球购物
大专学生推荐信范文
2013/11/19 职场文书
中英文求职信范文
2014/01/27 职场文书
小学优秀班主任事迹材料
2014/05/17 职场文书
施工安全生产承诺书
2014/05/23 职场文书
MySql按时,天,周,月进行数据统计
2022/08/14 MySQL