HTMLフォームで戻る動作の時にフォームの値を復元する(sisyphus.js)

投稿者: | 6月 12, 2019
0件のコメント

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

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

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

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

使用方法
HTMLフォーム(例



....

JavaScript で以下のように記述します。以下の例ではhidden以外を再構築するように指定しています。

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

この例では autoRelease を無効にしているので、ローカルストレージのデータを手動で削除する必要があります。
最終的なsubmit処理の時に、以下のような onclick動作を追加して、ローカルストレージを削除します。

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

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

Related posts:

No related posts.