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 相关文章推荐
用jquery来定位
Feb 20 Javascript
jQuery setTimeout()函数使用方法
Apr 07 Javascript
jQuery中阻止冒泡事件的方法介绍
Apr 12 Javascript
javascript中通过arguments参数伪装方法重载
Oct 08 Javascript
遍历json 对象的属性并且动态添加属性的实现
Dec 02 Javascript
jQuery简单实现对数组去重及排序操作实例
Oct 31 jQuery
javascript实现最长公共子序列实例代码
Feb 05 Javascript
微信公众号生成新浪短网址的实现(快速生成)
Aug 18 Javascript
微信小程序引入VANT组件的方法步骤
Sep 19 Javascript
vue 实现 rem 布局或vw 布局的方法
Nov 13 Javascript
node.JS事件机制与events事件模块的使用方法详解
Feb 06 Javascript
JavaScript前端面试扁平数据转tree与tree数据扁平化
Jun 14 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表单递交控件名称含有点号(.)会被转化为下划线(_)的处理方法
2013/01/06 PHP
ThinkPHP在Cli模式下使用模板引擎的方法
2015/09/25 PHP
php求数组全排列,元素所有组合的方法总结
2017/03/14 PHP
innertext , insertadjacentelement , insertadjacenthtml , insertadjacenttext 等区别
2007/06/29 Javascript
javascript新手语法小结
2008/06/15 Javascript
asp批量修改记录的代码
2008/06/25 Javascript
javascript HTMLEncode HTMLDecode的完整实例(兼容ie和火狐)
2009/06/02 Javascript
js 兼容多浏览器的回车和鼠标焦点事件代码(IE6/7/8,firefox,chrome)
2010/04/14 Javascript
window.name代替cookie的实现代码
2010/11/28 Javascript
js解析与序列化json数据(一)json.stringify()的基本用法
2013/02/01 Javascript
浅析JavaScript事件和方法
2015/02/28 Javascript
nodejs URL模块操作URL相关方法介绍
2015/03/03 NodeJs
assert()函数用法总结(推荐)
2017/01/25 Javascript
footer定位页面底部(代码分享)
2017/03/07 Javascript
React学习笔记之事件处理(二)
2017/07/02 Javascript
webpack使用 babel-loader 转换 ES6代码示例
2017/08/21 Javascript
解决select2在bootstrap modal中不能正常使用的问题
2018/08/09 Javascript
微信小程序时间选择插件使用详解
2018/12/28 Javascript
详解vue 自定义组件使用v-model 及探究其中原理
2019/10/11 Javascript
对layui数据表格动态cols(字段)动态变化详解
2019/10/25 Javascript
vue配置多代理服务接口地址操作
2020/09/08 Javascript
python数据处理实战(必看篇)
2017/06/11 Python
基于hashlib模块--加密(详解)
2017/06/21 Python
Python Xml文件添加字节属性的方法
2018/03/31 Python
打包python 加icon 去掉cmd黑窗口方法
2019/06/24 Python
python 如何将数据写入本地txt文本文件的实现方法
2019/09/11 Python
时尚圣经:The Fashion Bible
2019/03/03 全球购物
prAna官网:瑜伽、旅行和冒险服装
2019/03/10 全球购物
加拿大在线旅游公司:Flighthub
2019/03/11 全球购物
.NET remoting的两种通道是什么
2016/05/31 面试题
材料加工硕士生求职信
2013/10/10 职场文书
电话销售经理岗位职责
2013/12/07 职场文书
试用期转正鉴定评语
2014/01/27 职场文书
转让协议书范本
2014/04/15 职场文书
售房协议书范本
2015/08/11 职场文书
一行代码python实现文件共享服务器
2021/04/22 Python