分享一個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/