自動記憶表單狀態，重新開啟網頁後輸入的資料都還在﹍jQuery 外掛 Sisyphus

曾製作過不少線上工具，大多需要用表單的形式讓使用者輸入資料。其中「圖片 ALT 描述自動產生器」用到大量表單元件，有單選、多選、文字輸入等各種形式。

只要常常發佈部落格文章的話，這個工具每次都會用到，那麼表單勾選的狀態、或輸入的文字必須儲存起來，下次使用才不會麻煩，可避免重複勾選及輸入。

以前儲存表單狀態是用 cookie 來寫入，但程式寫起來不方便，且前陣子這個工具改版為「自適應 RWD 圖片語法產生器」，導致儲存表單狀態的功能必須重寫。

還好找到了一個基於 HTML5 開發的 jQuery 外掛 Sisyphus，不必使用 cookie，使用起來也超級方便、功能又強，解決了表單儲存的難題，本篇就來介紹如何使用。

一、CDN 安裝法

1. 官網介紹

• http://sisyphus-js.herokuapp.com/

官網做得非常直覺、易懂，進入後就可看到多個 DEMO 效果，旁邊就是範例程式碼。



例如上圖這個複雜的表單，各種表單輸入內容、下拉選單、核取方塊等等，重新整理頁面後，馬上就可看到效果，狀態都被儲存起來了。

執行程式碼也超簡單的，為表單取個 ID (例如 myForm)，執行以下程式碼就行了：

$("#myForm").sisyphus();

2. CDN 安裝連結

這麼好用的外掛，同時也不必另外找網頁空間存放檔案，已經有 CDN 支援了，請見這個網址：

• https://cdnjs.com/libraries/sisyphus.js

要引用這個外掛，在網頁 head區塊放以下程式碼即可：

<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/sisyphus.js/1.1.3/sisyphus.min.js'></script>
第一行要先引用 jQuery，第二行就是 Sisyphus 的 CDN 連結。

二、範例程式碼

以下提供一個簡單的範例：

<!--表單內容-->
<div id="remember_form">
<label>名稱</label>
<br/>
<input name="name" type="text" value="Wayne Fu">
<br/><br/>
<label>性別</label>
<br/>
<select name="sex">
<option selected="selected">男生</option>
<option>女生</option>
<option>其他</option>
</select>
<br/><br/>
<label>網站名稱、描述</label>
<br/>
<textarea name="description" cols="50" rows="5">WFU BLOG：
Blogger 技巧及工具最豐富的專業部落格，提供 RWD 網站架設、維護諮詢、網頁設計服務，分享網路雲端應用心得。</textarea>
<br/><br/>
<label>網站性質</label>
<br/>
<label>
<input name="attr" type="checkbox" checked="checked">網路雲端</label>
<br/>
<label>
<input name="attr" type="checkbox" checked="checked">網頁設計</label>
<br/>
<label>
<input name="attr" type="checkbox">美食旅遊</label>
<br/>
<label>
<input name="attr" type="checkbox">流行資訊</label>
<br/>
<label>
<input name="attr" type="checkbox">3C 開箱</label>
<br/>
</div>

<!--引用外掛-->
<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/sisyphus.js/1.1.3/sisyphus.min.js'></script>

<!--執行程式碼-->
<script>
$("#remember_form").sisyphus();
</script>

執行的效果大致如以下這個表單，可自行修改表單內容，再重新整理頁面，就可看到表單內容被記憶的效果：

三、補充事項

1. 一定要有 name

非常重要的一點，這個外掛的原理是讀取表單元件的屬性 "name" 來儲存資料，只要你的某個表單元素沒有設定 name，那個元素就無法儲存狀態了。

所以執行外掛之前，請詳細檢查你的所有表單元件，例如 input、select、textarea...等，是否都設定了 name 的參數。

如果不清楚 name 怎麼設定，可參考上面的程式碼範例。


2. API 說明

基本上這個外掛不需研究 API 說明，就很好用了。

如果有特別的需求需要使用官方 API，可參考官方說明書：

• https://sisyphus-js.herokuapp.com/#customization

這裡提供了一些參數、事件可以使用。

如果覺得英文說明看不懂，那麼可看這篇中文翻譯說明：

• [jQ]Sisyphus.js