软件 聊天 安全 视频 浏览器 下载 系统 办公 教学 输入法
免费 域名 空间 相册 邮箱 资源 网赚 试用 优惠 工具
教程 设计 三维 学院 办公 网页
素材 PSD 矢量 网页 PPT 动画
美女 唯美 大生活 美图 风景 时尚艺
资讯 新闻 专题 热点
您的位置: 广信之家 > 免费资源 > 免费插件 > 文章正文

分享一个jQuery的自动客户端本地保存插件Sisyphus.js

时间:12-23 15:55 来源:gbin1.com 整理:广信小编 我要评论(0)
字号:T|T
内容提要:
  今天我们介绍一个新的插件 - Sisyphus.js,这个插件是由Alexander Kaupanin开发的一个类似Gmail客户端草稿保存的jQuery插件,帮助你的用户在客户端保存未写完的草稿。

分享一个jQuery的自动客户端本地保存插件Sisyphus.js - 帮助你自动保存用户输入内容

今天我们介绍一个新的插件 - Sisyphus.js,这个插件是由Alexander Kaupanin开发的一个类似Gmail客户端草稿保存的jQuery插件,帮助你的用户在客户端保存未写完的草稿。

我们需要解决什么样的问题呢?

但凡使用过互联网的用户,都会有如下的惨痛教训:

洋洋洒洒的写了一篇几百的文章,正准备保存发布的时候,发现浏览器崩溃了,或者是你刚准备评论一篇不错的文章,可正准备递交的时候,你PC死机了。又或是你正准备发布时,不小心按错了快捷键F5或者后退键?

是不是你也曾为以上情况抓狂过?对于本人来说,我至少遇到过10次以上,每一次我都后悔自己为什么不早些保存。当然我们可以使用一些浏览器的插件,比如firefox的一些插件(例如,Lazarus)能够帮助你在本地保存表单上的数据。但是对于其它浏览器呢? 或者对于没有装插件的PC呢?

今天我们介绍的这款jQuery插件,绝对能让你以后避免遇到如此惨痛的经验。

自动保存的解决方案

通常使用的解决方式是按时自动保存表单内容到本地的文件中,完成后拷贝内容回表单输入项目中。

有的网站提供一个保存为草稿的按钮,但是这个并不非常方便,最方便的方式就类似Gmail提供一个定时自动保存机制。

使用Sisyphus.js

这里我们使用简单的方式来实现自动保存功能,数据将会保存到浏览器的local storage,然后直接从这里取出数据内容。

Javascript代码

引入jQuery类库,版本需要是1.2以上

调用Sisyphus,如下:

$('#GBin1form1. #GBin1form2').sisyphus();

或者你需要提供所有的表单自动保存机制:

$('Gbin1allform').sisyphus();

以上代码中,我们调用sisyphus方法来实现表单数据的自动保存。同时你可以自定义一些选项,如下:

customKeyPrefix

一个自定义的额外key用来保存表单内容数据

timeout

数据自动保存的间隔时间,按秒计算,如果设置为“0”,那么每一个字段更新都自动执行保存

onSave

本地保存操作后触发这个方法

onRestore

数据从本地存储读取后触发的方法,和onSaveCallback不一样,它作用于整个表单,而非某一个字段

onRelease

本地存储数据清空后调用的方法

我们可以使用如下代码自定义选项:

$('Gbin1allform').sisyphus({ customKeyPrefix: 'gb', timeout: 5, onSave: function() {}, onRestore: function() {}, onRelease: function() {} }}

你可以针对不同的表单设置不同的插件选项,并且能够随时修改插件对应的选项。

$('Gbin1allform1').sisyphus({ customKeyPrefix:'gbin1', timeout: 5, onSave:function() {}, onRestore: function() {}, onRelease: function() {} }}$('Gbin1allform2').sisyphus({ customKeyPrefix:'gbin1', timeout: 1, onSave: function() {}, onRestore: function() {}, onRelease: function() {} }}$.sisyphus().setOptions( {timeout:10} ); //设置全局选项 var gbin1 = $('#Gbin1allform1').sisyphus();gbin1.setOptions( {timeout: 15} ); //设置指定表单选项

插件信息

浏览器支持:

Chrome 4+,

Firefox 3.5+,

Opera 10.5+,

Safari 4+,

IE 8+,

Android 2.2,也应该可以在其它平台运行,需要你自己测试一下

使用要求:

jQuery1.2+

原文地址:http://www.gbin1.com/

感谢 gbin1.com 的投稿

    相关阅读:

    顶一下
    (0)
    0%
    踩一下
    (0)
    0%
    免责申明:以上内容仅代表原创者观点,其内容未经本站证实,分享一个jQuery的自动客户端本地保存插件Sisyphus.js对以上内容的真实性、完整性不作任何保证或承诺,转载目的在于传递更多信息,由此产生的后果与分享一个jQuery的自动客户端本地保存插件Sisyphus.js无关;如以上转载内容不慎侵犯了您的权益,请联系我们将会及时处理。
    [责任编辑:广信小编]

    精彩图文

    登录 (请登录发言,并遵守 相关规定)
    如果你对广信之家有任何意见或建议,请到交流平台反馈。到留言板反馈