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 相关文章推荐
LazyLoad 延迟加载(按需加载)
May 31 Javascript
jquery 插件学习(四)
Aug 06 Javascript
jquery ajax jsonp跨域调用实例代码
Dec 11 Javascript
JavaScript避免代码的重复执行经验技巧分享
Apr 17 Javascript
javascript结合ajax读取txt文件内容
Dec 05 Javascript
基于React.js实现原生js拖拽效果引发的思考
Mar 30 Javascript
AngularJS 视图详解及示例代码
Aug 17 Javascript
jQuery EasyUI window窗口使用实例代码
Dec 25 jQuery
Mac下安装vue
Apr 11 Javascript
vue 解决form表单提交但不跳转页面的问题
Oct 30 Javascript
Vue开发中常见的套路和技巧总结
Nov 24 Vue.js
JavaScript文档对象模型DOM
Nov 20 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
ThinkPHP3.1新特性之内容解析输出详解
2014/06/19 PHP
PHP CURL 内存泄露问题解决方法
2015/02/12 PHP
PHP实现对二维数组某个键排序的方法
2016/09/14 PHP
PHP使用curl函数发送Post请求的注意事项
2016/11/26 PHP
php array_reverse 以相反的顺序返回数组实例代码
2017/04/11 PHP
php 使用ActiveMQ发送消息,与处理消息操作示例
2020/02/23 PHP
做web开发 先学JavaScript
2014/12/12 Javascript
JavaScript中的getMilliseconds()方法使用详解
2015/06/10 Javascript
每天一篇javascript学习小结(属性定义方法)
2015/11/19 Javascript
JavaScript类型检测之typeof 和 instanceof 的缺陷与优化
2016/01/13 Javascript
Bootstrap自动适应PC、平板、手机的Bootstrap栅格系统
2016/05/27 Javascript
angular-cli修改端口号【angular2】
2017/04/19 Javascript
微信小程序 action-sheet 反馈上拉菜单简单实例
2017/05/11 Javascript
JS解决position:sticky的兼容性问题的方法
2017/10/17 Javascript
vue-cli配置flexible过程详解
2019/07/04 Javascript
Node.js在图片模板上生成二维码图片并附带底部文字说明实现详解
2019/08/07 Javascript
ant-design-vue 时间选择器赋值默认时间的操作
2020/10/27 Javascript
Python查询Mysql时返回字典结构的代码
2012/06/18 Python
python遍历目录的方法小结
2016/04/28 Python
基于Django contrib Comments 评论模块(详解)
2017/12/08 Python
Python实现读取Properties配置文件的方法
2018/03/29 Python
Python地图绘制实操详解
2019/03/04 Python
通过Python实现Payload分离免杀过程详解
2020/07/13 Python
详解selenium + chromedriver 被反爬的解决方法
2020/10/28 Python
Etam德国:内衣精品店
2019/08/25 全球购物
德国在线香料制造商:Gewürzland
2020/03/10 全球购物
乌克兰网上珠宝商店:GoldSoveren
2020/03/31 全球购物
客户经理岗位职责
2013/12/08 职场文书
英语感恩演讲稿
2014/01/14 职场文书
报表员工作失误检讨书范文
2014/09/19 职场文书
社区党员群众路线教育实践活动心得体会
2014/11/03 职场文书
现实表现材料范文
2014/12/23 职场文书
确保工程质量承诺书
2015/04/29 职场文书
浅谈Golang 嵌套 interface 的赋值问题
2021/04/29 Golang
mysql 带多个条件的查询方式
2021/06/05 MySQL
win11自动弹出虚拟键盘怎么关闭? Win11关闭虚拟键盘的技巧
2023/01/09 数码科技