今天我們介紹一個新的插件 - Sisyphus.js，這個插件是由Alexander Kaupanin開發(fā)的一個類似Gmail客戶端草稿保存的jQuery插件，幫助你的用戶在客戶端保存未寫完的草稿。
我們需要解決什么樣的問題呢？
但凡使用過互聯(lián)網(wǎng)的用戶，都會有如下的慘痛教訓(xùn)：
洋洋灑灑的寫了一篇幾百的文章，正準(zhǔn)備保存發(fā)布的時候，發(fā)現(xiàn)瀏覽器崩潰了，或者是你剛準(zhǔn)備評論一篇不錯的文章，可正準(zhǔn)備遞交的時候，你PC死機了。又或是你正準(zhǔn)備發(fā)布時，不小心按錯了快捷鍵F5或者后退鍵？
是不是你也曾為以上情況抓狂過？對于本人來說，我至少遇到過10次以上，每一次我都后悔自己為什么不早些保存。當(dāng)然我們可以使用一些瀏覽器的插件，比如firefox的一些插件（例如，Lazarus）能夠幫助你在本地保存表單上的數(shù)據(jù)。但是對于其它瀏覽器呢？ 或者對于沒有裝插件的PC呢？
今天我們介紹的這款jQuery插件，絕對能讓你以后避免遇到如此慘痛的經(jīng)驗。
自動保存的解決方案
通常使用的解決方式是按時自動保存表單內(nèi)容到本地的文件中，完成后拷貝內(nèi)容回表單輸入項目中。
有的網(wǎng)站提供一個保存為草稿的按鈕，但是這個并不非常方便，最方便的方式就類似Gmail提供一個定時自動保存機制。
使用Sisyphus.js
這里我們使用簡單的方式來實現(xiàn)自動保存功能，數(shù)據(jù)將會保存到瀏覽器的local storage，然后直接從這里取出數(shù)據(jù)內(nèi)容。
Javascript代碼
引入jQuery類庫，版本需要是1.2以上
調(diào)用Sisyphus，如下：
$('#GBin1form1. #GBin1form2').sisyphus();
或者你需要提供所有的表單自動保存機制：
$('Gbin1allform').sisyphus();
以上代碼中，我們調(diào)用sisyphus方法來實現(xiàn)表單數(shù)據(jù)的自動保存。同時你可以自定義一些選項，如下：
customKeyPrefix
一個自定義的額外key用來保存表單內(nèi)容數(shù)據(jù)
timeout
數(shù)據(jù)自動保存的間隔時間，按秒計算，如果設(shè)置為“0”，那么每一個字段更新都自動執(zhí)行保存
onSave
本地保存操作后觸發(fā)這個方法
onRestore
數(shù)據(jù)從本地存儲讀取后觸發(fā)的方法，和onSaveCallback不一樣，它作用于整個表單，而非某一個字段
onRelease
本地存儲數(shù)據(jù)清空后調(diào)用的方法
我們可以使用如下代碼自定義選項：
$('Gbin1allform').sisyphus({ customKeyPrefix: 'gb', timeout: 5, onSave: function() {}, onRestore: function() {}, onRelease: function() {} }}
你可以針對不同的表單設(shè)置不同的插件選項，并且能夠隨時修改插件對應(yīng)的選項。
$('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} ); //設(shè)置全局選項 var gbin1 = $('#Gbin1allform1').sisyphus();gbin1.setOptions( {timeout: 15} ); //設(shè)置指定表單選項
插件信息
瀏覽器支持：
Chrome 4+，
Firefox 3.5+，
Opera 10.5+，
Safari 4+，
IE 8+，
Android 2.2，也應(yīng)該可以在其它平臺運行，需要你自己測試一下
使用要求：
jQuery1.2+
原文地址：http://www.zydsybocom/gbin1ocom/
感謝 gbin1ocom 的投稿
