Toggle navigation
DevOps Knowledge
作成
作成
下書き一覧
ストック
一覧
複合検索
サインイン
更新履歴
incmplt
2018/04/20 15:13
現在との差分
過去のナレッジの内容
コンテンツ
フォームへの確認画面などで「戻るボタン」を押して画面遷移した場合や「リロード」ボタンを押した時に自動的に値を再構築したい場合、非常に面倒な手間が必要だった。 この面倒な処理をなくし、HTML5のローカルストレージ機能を使用してフォームの値を再構築するJQueryプラグインが「sisyphus.js」である。 HTML5のローカルストレージ(ローカルDB)を使用するので、IEの古いバージョンでは動作しない。 Chrome,Firefoxなどでは問題なく利用することができる。 [sisyphus.js 本家サイト http://sisyphus-js.herokuapp.com/ ](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;" ``` その他パラメータなどは、プラグイン付属のドキュメントもしくは公式サイトを参照。
現在のナレッジの内容
コンテンツ
フォームへの確認画面などで「戻るボタン」を押して画面遷移した場合や「リロード」ボタンを押した時に自動的に値を再構築したい場合、非常に面倒な手間が必要だった。 この面倒な処理をなくし、HTML5のローカルストレージ機能を使用してフォームの値を再構築するJQueryプラグインが「sisyphus.js」である。 HTML5のローカルストレージ(ローカルDB)を使用するので、IEの古いバージョンでは動作しない。 Chrome,Firefoxなどでは問題なく利用することができる。 [sisyphus.js 本家サイト http://sisyphus-js.herokuapp.com/ ](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;" ``` その他パラメータなどは、プラグイン付属のドキュメントもしくは公式サイトを参照。
戻る
