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实现数字+字母验证码的简单实例
Feb 10 Javascript
JavaScript eval() 函数介绍及应用示例
Jul 29 Javascript
jQuery插件zoom实现图片全屏放大弹出层特效
Apr 15 Javascript
javascript拖拽应用实例
Mar 25 Javascript
用JS动态改变表单form里的action值属性的两种方法
May 25 Javascript
使用ionic切换页面卡顿的解决方法
Dec 16 Javascript
EasyUI学习之Combobox下拉列表(1)
Dec 29 Javascript
ES6新特性之变量和字符串用法示例
Apr 01 Javascript
JS封装的模仿qq右下角消息弹窗功能示例
Aug 22 Javascript
Node.js + express基本用法教程
Mar 14 Javascript
详解easyui 切换主题皮肤
Apr 04 Javascript
基于JavaScript判断两个对象内容是否相等
Jan 10 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
优化NFR之一 --MSSQL Hello Buffer Overflow
2006/10/09 PHP
实现dedecms全站URL静态化改造的代码
2007/03/29 PHP
Zend的MVC机制使用分析(一)
2013/05/02 PHP
谈谈PHP连接Access数据库的注意事项
2016/08/12 PHP
PHP两种实现无级递归分类的方法
2017/03/02 PHP
PHP实现数据库统计时间戳按天分组输出数据的方法
2017/10/10 PHP
php中的explode()函数实例介绍
2019/01/18 PHP
PHP实现通过文本文件统计页面访问量功能示例
2019/02/13 PHP
laravel 实现关闭CSRF(全部关闭、部分关闭)
2019/10/21 PHP
Laravel jwt 多表(多用户端)验证隔离的实现
2019/12/18 PHP
用javascript实现分割提取页面所需内容
2007/05/09 Javascript
Extjs中ComboBoxTree实现的下拉框树效果(自写)
2013/05/28 Javascript
js通过元素class名字获取元素集合的具体实现
2014/01/06 Javascript
javascript属性访问表达式用法分析
2015/04/25 Javascript
jQuery实现的图文高亮滚动切换特效实例
2015/08/10 Javascript
浅谈javascript函数式编程
2015/09/06 Javascript
JS实现的车标图片提示效果代码
2015/10/10 Javascript
JS跨域解决方案之使用CORS实现跨域
2016/04/14 Javascript
JavaScript:Date类型全面解析
2016/05/19 Javascript
Vue自定义指令介绍(2)
2016/12/08 Javascript
JavaScript运动框架 解决防抖动问题、悬浮对联(二)
2017/05/17 Javascript
axios全局注册,设置token,以及全局设置url请求网段的方法
2018/09/25 Javascript
微信小程序签到功能
2018/10/31 Javascript
node.js使用mongoose操作数据库实现购物车的增、删、改、查功能示例
2019/12/23 Javascript
js中调用微信的扫描二维码功能的实现代码
2020/04/11 Javascript
解决vue addRoutes不生效问题
2020/08/04 Javascript
为什么推荐使用JSX开发Vue3
2020/12/28 Vue.js
[06:50]DSPL次级职业联赛十强晋级之路
2014/11/18 DOTA
实例讲解python函数式编程
2014/06/09 Python
Python返回真假值(True or False)小技巧
2015/04/10 Python
丝芙兰法国官网:SEPHORA法国
2016/09/01 全球购物
澳大利高级泳装品牌:Bondi Born
2018/05/23 全球购物
Lookfantastic俄罗斯:欧洲在线化妆品零售商
2019/08/06 全球购物
Nicole Miller官方网站:纽约女装品牌
2019/09/14 全球购物
大学生冰淇淋店商业计划书
2014/01/14 职场文书
肖申克的救赎观后感
2015/06/02 职场文书