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