JQUERY表单暂存功能插件分享

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.jb51.net/201602/yuanma/jquery.formLocalStorage(jb51.net).zip

赞 (0)

相关推荐

  • Javascript 计算字符串在localStorage中所占字节数

    最近项目有个需求要用js计算一串字符串写入到localStorage里所占的内存,众所周知的,js是使用Unicode编码的.而Unicode的实现有N种,其中用的最多的就是UTF-8和UTF-16.因此本文只对这两种编码进行讨论. 下面这个定义摘自维基百科(http://zh.wikipedia.org/zh-cn/UTF-8),做了部分删减. UTF-8(8-bit Unicode Transformation Format)是一种针对Unicode的可变长度字符编码,可以表示Unicode

  • 详解JavaScript中localStorage使用要点

    详解JavaScript中localStorage使用要点

    localStorage主要用来替代cookie,解决cookie(可参考cookie使用要点)读写困难.容量有限的问题. localStorage有以下几个特点 1.localStorage是一个普通对象,任何对象的操作都适用. 2.localStorage对象的属性值只能是字符串. 这个需要特别注意了,假设我们要保存一个对象到localStorage中,可以使用拼接的方式.如 var obj = { "na=me": "chua", age: 9 } //拼接到

  • android webview 中localStorage无效的解决方法

    我在 android里面 使用html5的 localStorage 为什么存不进去也读不出来呀? 网上搜了好多都没效果 复制代码 代码如下: mainWebView = (WebView)this.findViewById(R.id.mainWebView);         WebSettings settings = mainWebView.getSettings();         settings.setJavaScriptEnabled(true);         setting

  • 使用jquery读取html5 localstorage的值的方法

    在HTML 5中,localstorage是个不错的东西,在支持localstorage的浏览器中, 能持久化用户表单的输入,即使关掉浏览器,下次重新打开浏览器访问,也能读出其值, 下面给出的例子是使用jquery 在每次表单加载的时候,读localstorage的值,而在表单每次提交时则清楚其值的例子 首先是一个表单: 复制代码 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta chars

  • JS localStorage实现本地缓存的方法

    复制代码 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html>   <head>     <title>本地缓存</title>     <script type="text/javascript">         var strKey = "strKey";        

  • JQUERY表单暂存功能插件分享

    jquery.formLocalStorage 是一个实现通用表单暂存功能的jquery插件 原理: 监控表单域变化,并使用HTML5 WebStorage中的localStorage来存储这些有变化的表单域的值,并在从新加载表单时将存储的值载入回表单域中,从而实现暂存功能. 功能特点: 1.不使用服务器端存储,节省服务器资源. 2.代码简练,使用默认配置的话只需一小段代码 $("#your_form_id").formLocalStorage(); 即可搞定,无需写一大坨服务器端逻辑

  • jQuery表单验证简单示例

    jQuery表单验证简单示例

    本文实例讲述了jQuery表单验证简单用法.分享给大家供大家参考,具体如下: 这几天一直在做一个表单验证的页面,为了达到友好界面,特意去抄了360buy的页面,模仿写了一个页面 jquery 表单验证 就是验证表单里面所信息都为必填 //注册页面验证机制 $("#username").focus(function(){ //用focus()表单,当光标在输入框的时候执行下面的代码 $("#username_error").removeClass("erro

  • jQuery表单域选择器用法分析

    jQuery表单域选择器用法分析

    本文实例分析了jQuery表单域选择器用法.分享给大家供大家参考.具体如下: 表单域是指网页中的input,textarea, select和button元素. 1. :input选择器 复制代码 代码如下: $(":input") 2. :text选择器 复制代码 代码如下: $(":text") 3. :password选择器 复制代码 代码如下: $(":password") 4. :radio选择器 复制代码 代码如下: $("

  • 微信小程序简单实现form表单获取输入数据功能示例

    微信小程序简单实现form表单获取输入数据功能示例

    本文实例讲述了微信小程序简单实现form表单获取输入数据功能.分享给大家供大家参考,具体如下: 1.效果展示 2.关键代码 index.wxml <form bindsubmit="formBindsubmit" bindreset="formReset"> <view style="display:flex;"> <label>用户名:</label> <input name="u

  • PHP实现防止表单重复提交功能【基于token验证】

    PHP实现防止表单重复提交功能【基于token验证】

    本文实例讲述了PHP实现防止表单重复提交功能.分享给大家供大家参考,具体如下: 防止表单重复提交的方法有很多种,那么今天就给大家介绍一种php如何有效的防止表单重复提交. 代码非常简单 我相信大家很聪明给大家分享一个小的demo,大家可以借鉴一下: 具体代码: <?php /* * 2016年9月29日08:09:13 */ session_start(); header("Content-Type: text/html;charset=utf-8"); function set

  • 分享27款非常棒的jQuery 表单插件

    分享27款非常棒的jQuery 表单插件

    本文收集了非常棒的jQuery表单插件与大家分享,欢迎大家推荐更多更好的插件. 1- jQuery inline form validation 2- Uniform 3- Autotab 4- jquery Niceforms 5- jquery Form Validator 6- Toggle FormText plug-in 7- jQuery Field Plug-in 8- In-Field Labels jQuery Plugin 9- jQuery Comment Preview

  • JQuery表单验证插件EasyValidator用法分析

    JQuery表单验证插件EasyValidator用法分析

    本文实例讲述了JQuery表单验证插件EasyValidator用法.分享给大家供大家参考.具体如下: 本插件的宗旨是:用户无需写一行JS验证代码,只需在要验证的表单中加入相应的验证属性即可,让验证功能易维护,可扩展,更容易上手. DEMO中已经包含了常用的正则表达式,可以直接复用,为了考虑扩展性,所以针对不同用户特殊需求,自行写正则吧. EasyValidator实现的功能: 1.提示功能(在表单或者其他标签中加入tip="想提示的文字") 如: 复制代码 代码如下: <inp

  • jQuery+html5+css3实现圆角无刷新表单带输入验证功能代码

    jQuery+html5+css3实现圆角无刷新表单带输入验证功能代码

    本文实例讲述了jQuery+html5+css3实现圆角无刷新表单带输入验证功能代码.分享给大家供大家参考.具体如下: 这里实现圆角表单,圆角输入框,无刷新验证,漂亮唯美,是对这款基于HTML5/CSS3/jQuery来实现的表单效果的简要概括,用HTML5可以实现很多超乎寻常的效果,从此你会喜欢上HTML5,会骂一下万恶的IE,到现在IE8还不支持HTML5,正悲哀着呢. 先来看看运行效果截图: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-htm

  • Yii框架中jquery表单验证插件用法示例

    Yii框架中jquery表单验证插件用法示例

    本文实例讲述了Yii框架中jquery表单验证插件用法.分享给大家供大家参考,具体如下: 运行效果图如下: 视图层: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtm

  • jQuery复制表单元素附源码分享效果演示

    jQuery复制表单元素附源码分享效果演示

    我们在提交表单时,有时会遇到需要重复添加多个相同表单元素,如订单信息中需要添加多个不同型号的产品.表单数据中新增字段信息等.这个时候我们可以在表单中直接放置一个"新增一项"或"复制"按钮,通过点击按钮即可实现复制表单元素. 查看演示 下载源码 HTML 本文我们通过实例介绍一款简单的基于jQuery的元素复制插件,通过调用该插件轻松实现元素复制功能. 首先载入jQuery库文件和元素复制插件duplicateElement.min.js. <script sr

随机推荐