今天我們介紹一個新的插件 - 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.zydsybocom/gbin1ocom/

感謝 gbin1ocom 的投稿