クッキーでフォームを復元(jquery.addInputAreaに対応)

プログラミング

一般的に、フォーム入力後の確認画面に進んだ後でブラウザ操作で戻ると、入力内容は消えてしまっています。
(ブラウザによっては自動で保存してくれるものもありますが)
一旦ページ遷移したフォームを復元する場合は、クッキーを使うのが一般的だと思います。
簡単な例を作ってみました。
http://code.runnable.com/VWf99uKxXlVQz-G6/


ここで問題が。
自作のjQueryプラグイン。
フォーム入力欄を動的に追加できます。
【jquery.addInputArea】
http://d.hatena.ne.jp/sutara_lumpur/20120509/1336556562


これを使っていると、フォームの復元がちょっと難しくなります。
が、なんとか見本を作れました。
http://code.runnable.com/VWf_NfxNQjlQiXIi/


要点は下記です。



if (!$('#' + key)[0]) {

	$('.list1_add').click();

}
特定のid名の入力欄がなかったら、つまり、動的に追加した入力欄だったなら、自作プラグインにおいて"入力欄を追加する"ボタンをクリックするイベントを手動で起こします。
詳しくはサンプルページでソースを表示してご覧ください。
プラグインの大幅な書き換えが必要なのではと怖かったのですが、あっさり実現できてほっとしました (*´∀｀*) ﾎｯ


サンプルではCSSクラス名などをハードコーディングしてますが、簡易な記述にするためですので、ご了承くださいm(_ _)m
また、上の例ではjQueryプラグインの"jquery.cookie"を使い、jsオブジェクトをJSON形式で保管しています。
このプラグインのおかげで、本当に簡単な記述でクッキーを使うことができました。
それについての記事も別に書いています。
【jquery.cookieでjsオブジェクトをJSONで保管するメモ】
http://d.hatena.ne.jp/sutara_lumpur/20121128/1354070483