资讯专栏INFORMATION COLUMN

写了一个实现表单暂存功能的jquery插件

goji / 1938人阅读

摘要:是一个实现通用表单暂存功能的插件原理监控表单域变化,并使用中的来存储这些有变化的表单域的值,并在从新加载表单时将存储的值载入回表单域中,从而实现暂存功能。默认的是,在提交后若发生变化则会定位不到暂存,最好使用别的唯一值作为默认

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_perfixthis.context.URL + form_selector + "@",在提交后若this.context.URL发生变化则会定位不到暂存,最好使用别的唯一值作为默认storage_name_perfix

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/87504.html

相关文章

  • 库&插件&框架&工具

    摘要:一些有用的一些有用的,包括转换小箭头三角形媒体查询等中文指南是当下最热门的前端资源模块化管理和打包工具。 nodejs 入门 nodejs 入门教程,大家可以在 github 上提交错误 2016 年最好用的表单验证库 SMValidator.js 前端表单验证工具分享 浅谈前端线上部署与运维 说到前端部署,可能大多数前端工程师在工作中都是使用的公司现成的部署系统,与SRE对接、一起完...

    Codeing_ls 评论0 收藏0
  • 库&插件&框架&工具

    摘要:一些有用的一些有用的,包括转换小箭头三角形媒体查询等中文指南是当下最热门的前端资源模块化管理和打包工具。 nodejs 入门 nodejs 入门教程,大家可以在 github 上提交错误 2016 年最好用的表单验证库 SMValidator.js 前端表单验证工具分享 浅谈前端线上部署与运维 说到前端部署,可能大多数前端工程师在工作中都是使用的公司现成的部署系统,与SRE对接、一起完...

    xiaowugui666 评论0 收藏0
  • AJAX-Cache:一款好用Ajax缓存插件

    摘要:是一款缓存插件,可以为方法扩展缓存功能。缓存清理插件本身会自动清理过期缓存对于不想继续使用缓存的接口可以为方法传入清理当前接口的缓存并返回最新数据也可以调用清理所有插件产生的缓存。 原文链接 AJAX-Cache是什么 Ajax是前端开发必不可少的数据获取手段,在频繁的异步请求业务中,我们往往需要利用缓存提升界面响应速度,减少网络资源占用。AJAX-Cache是一款jQuery缓存插件...

    didikee 评论0 收藏0
  • 前端技术 博客文章、书籍 积累

    摘要:好多编辑器例如等都支持这样的语法来快速的编写代码如何优雅地使用把标签放在结束标签之后结束标签之前的差别什么是响应式设计怎样进行 书籍 《JavaScriptDOM编程艺术》《JavaScript高级程序设计》《JavaScript框架设计》《JavaScript专家编程》《JavaScript Ninjia》《JavaScript语言精粹(修订版)》《JavaScript设计模式》《J...

    LiangJ 评论0 收藏0
  • 前端技术 博客文章、书籍 积累

    摘要:好多编辑器例如等都支持这样的语法来快速的编写代码如何优雅地使用把标签放在结束标签之后结束标签之前的差别什么是响应式设计怎样进行 书籍 《JavaScriptDOM编程艺术》《JavaScript高级程序设计》《JavaScript框架设计》《JavaScript专家编程》《JavaScript Ninjia》《JavaScript语言精粹(修订版)》《JavaScript设计模式》《J...

    codercao 评论0 收藏0

发表评论

0条评论

goji

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<