フォームへの確認画面などで「戻るボタン」を押して画面遷移した場合や「リロード」ボタンを押した時に自動的に値を再構築したい場合、非常に面倒な手間が必要だった。

この面倒な処理をなくし、HTML5のローカルストレージ機能を使用してフォームの値を再構築するJQueryプラグインが「sisyphus.js」である。

HTML5のローカルストレージ(ローカルDB)を使用するので、IEの古いバージョンでは動作しない。
Chrome,Firefoxなどでは問題なく利用することができる。

sisyphus.js 本家サイト http://sisyphus-js.herokuapp.com/

使用方法

HTMLフォーム(例

<form id="dataform">
....
</form>

JavaScript で以下のように記述(以下の例ではhidden以外を再構築するように指定)

$(function(){
    $( "#dataform" ).sisyphus( {
        locationBased: false,
        excludeFields: $('input[type="hidden"]'),
        autoRelease: false
    } );
});

この例では autoRelease を無効にしているので、ローカルストレージのデータを手動で削除する必要がある。

最終的なsubmit処理の時に、以下のような onclick動作を追加して、ローカルストレージを削除する。

onclick="localStorage.clear();return true;"

その他パラメータなどは、プラグイン付属のドキュメントもしくは公式サイトを参照。