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 相关文章推荐
利用js跨页面保存变量做菜单的方法
Jan 17 Javascript
THREE.JS入门教程(4)创建粒子系统
Jan 24 Javascript
javascript实现全角与半角字符的转换
Jan 07 Javascript
JavaScript中的普通函数与构造函数比较
Apr 07 Javascript
jquery中表单 多选框的一种巧妙写法
Sep 06 Javascript
js判断浏览器是否支持严格模式的方法
Oct 04 Javascript
最实用的jQuery分页插件
Oct 09 Javascript
jQuery实现的背景颜色渐变动画效果示例
Mar 24 jQuery
angular4 如何在全局设置路由跳转动画的方法
Aug 30 Javascript
详解React Native 采用Fetch方式发送跨域POST请求
Nov 15 Javascript
浅谈Node.js 中间件模式
Jun 12 Javascript
脚手架vue-cli工程webpack的基本用法详解
Sep 29 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
Fine Uploader文件上传组件应用介绍
2013/01/06 PHP
PHP 获取文件路径(灵活应用__FILE__)
2013/02/15 PHP
PHP Global定义全局变量使用说明
2013/08/15 PHP
PHP版本如何选择?应该使用哪个版本?
2015/05/13 PHP
简单的pgsql pdo php操作类实现代码
2016/08/25 PHP
Yii框架参数化查询中IN查询只能查询一个的解决方法
2017/05/20 PHP
实例讲解YII2中多表关联的使用方法
2017/07/21 PHP
ThinkPHP3.1.x修改成功与失败跳转页面的方法
2017/09/29 PHP
PHP实现的简单组词算法示例
2018/04/10 PHP
解决Laravel自定义类引入和命名空间的问题
2019/10/15 PHP
跨浏览器开发经验总结(四) 怎么写入剪贴板
2010/05/13 Javascript
js批量设置样式的三种方法不推荐使用with
2013/02/25 Javascript
jQuery实现回车键(Enter)切换文本框焦点的代码实例
2014/05/05 Javascript
一个JS函数搞定网页标题(title)闪动效果
2014/05/13 Javascript
JS数组(Array)处理函数整理
2014/12/07 Javascript
AngularJS自定义指令详解(有分页插件代码)
2017/06/12 Javascript
Python快速从注释生成文档的方法
2016/12/26 Python
python中defaultdict的用法详解
2017/06/07 Python
python 3.0 模拟用户登录功能并实现三次错误锁定
2017/11/01 Python
python 堆和优先队列的使用详解
2019/03/05 Python
python实现ftp文件传输功能
2020/03/20 Python
Python使用Selenium模拟浏览器自动操作功能
2020/09/08 Python
python中常用的数据结构介绍
2021/01/12 Python
HTTP状态码详解
2021/03/18 杂记
全球领先的中国制造商品在线批发平台:DHgate
2020/01/28 全球购物
聚网科技C++面试笔试题
2015/09/01 面试题
如何判断一段程序是由C 编译程序还是由C++编译程序编译的
2013/08/04 面试题
DBA数据库管理员JAVA程序员架构师必看
2016/02/07 面试题
涉外文秘个人求职的自我评价
2013/10/07 职场文书
物流管理专业毕业生求职信
2014/03/23 职场文书
小学优秀辅导员事迹材料
2014/05/11 职场文书
户外宣传策划方案
2014/05/25 职场文书
会展策划与管理专业求职信
2014/06/09 职场文书
房产公证委托书范本
2014/09/20 职场文书
社区环境卫生倡议书
2015/04/29 职场文书
离婚起诉书范文2016
2015/11/26 职场文书