免费 域名 空间 相册 邮箱 资源 网赚 试用 优惠 工具
教程 设计 三维 学院 办公 网页
素材 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无关;如以上转载内容不慎侵犯了您的权益,请联系我们将会及时处理。
    [责任编辑:广信小编]

    精彩图文

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