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 相关文章推荐
给ListBox添加双击事件示例代码
Dec 02 Javascript
JS中的log对象获取以及debug的写法介绍
Mar 03 Javascript
javascript内置对象arguments详解
Mar 16 Javascript
jquery实现页面百叶窗走马灯式翻滚显示效果的方法
Mar 12 Javascript
.NET微信公众号开发之创建自定义菜单
Jul 16 Javascript
js获取当前年月日-YYYYmmDD格式的实现代码
Jun 01 Javascript
分享JavaScript监听全部Ajax请求事件的方法
Aug 28 Javascript
微信小程序 教程之WXSS
Oct 18 Javascript
JS+jQuery实现注册信息的验证功能
Sep 26 jQuery
jQuery+CSS实现的标签页效果示例【测试可用】
Aug 14 jQuery
React和Vue中监听变量变化的方法
Nov 14 Javascript
10分钟学会js处理json的常用方法
Dec 06 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也可以?成Shell Script
2006/10/09 PHP
destoon供应信息title调用出公司名称的方法
2014/08/22 PHP
了解PHP的返回引用和局部静态变量
2015/06/04 PHP
不错的asp中显示新闻的功能
2006/10/13 Javascript
js prototype截取字符串函数
2010/04/01 Javascript
选择器中含有空格在使用示例及注意事项
2013/07/31 Javascript
纯js简单日历实现代码
2013/10/05 Javascript
BootStrap入门教程(三)之响应式原理
2016/09/19 Javascript
AngularJS 中使用Swiper制作滚动图不能滑动的解决方法
2016/11/15 Javascript
JS常用倒计时代码实例总结
2017/02/07 Javascript
ES6学习之变量的两种命名方法示例
2017/07/18 Javascript
webpack 从指定入口文件中提取公共文件的方法
2018/11/13 Javascript
js实现web调用摄像头 js截取视频画面
2019/04/21 Javascript
js实现一款简单踩白块小游戏(曾经很火)
2019/12/02 Javascript
vscode+gulp轻松开发小程序的完整步骤
2020/10/18 Javascript
python目录操作之python遍历文件夹后将结果存储为xml
2014/01/27 Python
举例讲解Python面相对象编程中对象的属性与类的方法
2016/01/19 Python
python 简单的多线程链接实现代码
2016/08/28 Python
python如何把嵌套列表转变成普通列表
2018/03/20 Python
Python 如何提高元组的可读性
2019/08/26 Python
基于Pycharm加载多个项目过程图解
2020/01/19 Python
快速解决jupyter notebook启动需要密码的问题
2020/04/21 Python
python使用多线程+socket实现端口扫描
2020/05/28 Python
用python发送微信消息
2020/12/21 Python
Python将QQ聊天记录生成词云的示例代码
2021/02/10 Python
收集的22款给力的HTML5和CSS3帮助工具
2012/09/14 HTML / CSS
HTML5实践-图片设置成灰度图
2012/11/12 HTML / CSS
HTML5实现自带进度条和滑块滑杆效果
2018/04/17 HTML / CSS
经典c++面试题五
2014/12/17 面试题
应届专科生个人的自我评价
2014/01/05 职场文书
班级年度安全计划书
2014/05/01 职场文书
体育系毕业生自荐信
2014/06/28 职场文书
软环境建设心得体会
2014/09/09 职场文书
2014年外贸业务员工作总结
2014/12/11 职场文书
运动会开幕词
2015/01/28 职场文书
拾金不昧表扬稿大全
2015/05/05 职场文书