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 相关文章推荐
Code:findPosX 和 findPosY
Dec 20 Javascript
Firefox div高度自适应
Apr 28 Javascript
js cookies实现简单统计访问次数
Nov 24 Javascript
Javascript 去除数组的重复元素
May 04 Javascript
javascript中的previousSibling和nextSibling的正确用法
Sep 16 Javascript
深入理解Javascript中的valueOf与toString
Jan 04 Javascript
es6 字符串String的扩展(实例讲解)
Aug 03 Javascript
vue内置指令详解
Apr 03 Javascript
浅谈webpack4.x 入门(一篇足矣)
Sep 05 Javascript
vue+iview 兼容IE11浏览器的实现方法
Jan 07 Javascript
JS画布动态实现黑客帝国背景效果
Nov 08 Javascript
JavaScript原型链详解
Nov 07 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实现字节数Byte转换为KB、MB、GB、TB的方法
2017/08/31 PHP
php安装扩展mysqli的实现步骤及报错解决办法
2017/09/23 PHP
在Laravel中实现使用AJAX动态刷新部分页面
2019/10/15 PHP
js 自定义的联动下拉框
2010/02/07 Javascript
IE6背景图片不缓存问题解决方案及图片使用策略多个方法小结
2012/05/14 Javascript
JavaScript函数的4种调用方法详解
2014/04/22 Javascript
javaScript如何处理从java后台返回的list
2014/04/24 Javascript
javascript异步处理工作机制详解
2015/04/13 Javascript
jQuery预加载图片常用方法
2015/06/15 Javascript
C++中的string类的用法小结
2015/08/07 Javascript
深入学习AngularJS中数据的双向绑定机制
2016/03/04 Javascript
关于Iframe父页面与子页面之间的相互调用
2016/11/22 Javascript
mpvue中配置vuex并持久化到本地Storage图文教程解析
2018/03/15 Javascript
微信小程序自定义组件实现tabs选项卡功能
2018/07/14 Javascript
vue填坑之webpack run build 静态资源找不到的解决方法
2018/09/03 Javascript
Node.js实现用户评论社区功能(体验前后端开发的乐趣)
2019/05/09 Javascript
浅谈Vuex注入Vue生命周期的过程
2019/05/20 Javascript
vuejs移动端实现div拖拽移动
2019/07/25 Javascript
vue输入框使用模糊搜索功能的实现代码
2020/05/26 Javascript
vue webpack build资源相对路径的问题及解决方法
2020/06/04 Javascript
JavaScript 中的执行上下文和执行栈实例讲解
2021/02/25 Javascript
分享一下如何编写高效且优雅的 Python 代码
2017/09/07 Python
Python爬虫实现全国失信被执行人名单查询功能示例
2018/05/03 Python
python 多线程将大文件分开下载后在合并的实例
2018/11/09 Python
python使用sessions模拟登录淘宝的方式
2019/08/16 Python
python with (as)语句实例详解
2020/02/04 Python
python中 _、__、__xx__()区别及使用场景
2020/06/30 Python
html5中 media(播放器)的api使用指南
2014/12/26 HTML / CSS
介绍一下SOA和SOA的基本特征
2016/02/24 面试题
广告词串烧
2014/03/19 职场文书
优秀班主任经验交流材料
2014/06/02 职场文书
2016年全国爱牙日宣传活动总结
2016/04/05 职场文书
诺贝尔奖获得者名言100句:句句启人心智,值永久收藏
2019/08/09 职场文书
详解Python常用的魔法方法
2021/06/03 Python
Python中使用ipython的详细教程
2021/06/22 Python
如何使用注解方式实现 Redis 分布式锁
2022/07/23 Redis