有時候填寫某些落落長的表單時，當遇到瀏覽器或是電腦當機的話，整個可能又要重新輸入了。所以 Sisyphus.js 利用了 HTML5 的 localStorage 功能來每隔 N 秒暫存目前所輸入的欄位資料，當瀏覽器未送出前重整或重新開啟都能把資料載回來呢！
套件名稱：Sisyphus.js
套件網址：N/A
作者網站：http://simsalabim.github.com/sisyphus/
套件網址：N/A
發佈日期：2012-05-17
檔案大小：12.7 KB
檔案下載：sisyphus.js
參數選項說明：
檢視原始碼 JavaScript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 | excludeFields(選填) 描述： 要排除暫存的欄位; 需要傳入 jQuery 物件, 例如: $('textarea, :text') 預設值： null customKeyPrefix(選填) 描述： 暫存資料名稱的後綴 預設值： "" timeout(選填) 描述： 每隔幾秒暫存一次, 設成 0 則會當欄位值有更新時就馬上儲存 預設值： 0 autoRelease(選填) 描述： 若設為 false 時, 就算當按下表單的送出或清除鈕也不會刪除暫存資料 預設值： true name(選填) 描述： 暫存資料名稱的前綴; 若沒設定則會用 location.hostname + location.pathname + location.search 預設值： null onSave(選填) 描述： 當資料暫存後執行的動作 預設值： function() {} onBeforeRestore(選填) 描述： 當暫存資料要還原前執行的動作 預設值： function() {} onRestore(選填) 描述： 當暫存資料還原後執行的動作 預設值： function() {} onRelease(選填) 描述： 當暫存資料刪除後執行的動作 預設值： function() {} |
方法說明：
檢視原始碼 JavaScript
1 2 | // 每隔 N 秒暫存指定表單的欄位值 $(selector).sisyphus(options); |
使用範例：
檢視原始碼 JavaScript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 | <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="sisyphus.js"></script> <style type="text/css"> .input-label { display: block; margin: 0 0 5px 0; } .field { margin: 10px 0 20px; } </style> <script type="text/javascript"> $(function(){ // 自動定時每 5 秒儲存一次輸入的資料 // 網頁載入時, 若有未送出的資料則載入它, ˊ $('#form').sisyphus({ timeout: 5, onRestore: function(){ alert('載入已輸入但未送出的資料完成'); } }); }); </script> <body> <h3>隨意輸入後重整瀏覽器或是開另一個新的同網址頁面</h3> <form name="form" id="form" method="get"> <div class="field"> <label for="yetAnotherName" class="input-label">Input Text:</label> <input type="text" name="name" value="" id="yetAnotherName" /> </div> <div class="field"> <label for="planet" class="input-label">Select Multiple:</label> <select name="planet[]" multiple size="5" id="planet"> <option value="Mercury">Mercury</option> <option value="Venus">Venus</option> <option value="Earth">Earth</option> </select> </div> <div class="field"> <label for="single">Checkbox:</label> <input type="checkbox" name="single" value="1" id="single" /> </div> <div class="field"> <label for="single-noname">Checkbox without name:</label> <input type="checkbox" value="1" id="single-noname" /> </div> <div class="field"> <label for="yetAnotherTextarea" class="input-label">Textarea:</label> <textarea name="description" cols="50" rows="10" id="yetAnotherTextarea"></textarea> </div> <div class="field"> <input type="submit" value="Submit" /> <input type="reset" value="Reset" /> </div> </form> </body> |