たたみラボ

  • about
  • member
  • r&d
  • blog
  • tatamicast

blog

RSS

前回のフォームの内容をクッキーに保存

icon January 29, 2006 1:25 AM by yuugo このエントリーを含むはてなブックマーク

手書き書類のワークフローではよく、自分の名前や住所などの「自分にとってのデフォルト値」をあらかじめ記入して、そのコピーをとっておくということをしました。システム化されるとそれが出来ない。やろうとするとそこそこの開発コストが要求される。

そこで、クッキーに保存するようにすれば、どんなWebアプリにもインプリメントしやすいだろうと、そういうJavaScriptを作ってみました。

サンプル

http://www.tatamilab.jp/~yuugo/sttock/storeTocookie.html

機能

  1. form内の各要素の値(チェックの有無)をクッキーに保存します
  2. 1で保存されたクッキーからformの各要素に値をセットしなおします
  3. 対象となる要素
    1. input type=text
    2. input type=checkbox
    3. input type=radio
    4. textarea
    5. select

制限事項

クッキーの容量を超えるものは保存できません。特にエラートラップはしていません。

組み込み方

HTMLにスクリプトを二つ組み込みます。

<script type="text/javascript" src="json.js"></script>
<script type="text/javascript" src="sttock.js"></script>

json.jsは、JavaScriptオブジェクトを文字列形式にしてくれる汎用ライブラリです。
JSON/簡単なテスト:基本

sttock.jsが自作のライブラリです。
http://www.tatamilab.jp/~yuugo/sttock/sttock.js

以下メソッド解説。

  • saveValue(frm)
    • formの中の値をクッキーに保存します
  • restoreValue(frm)
    • クッキーの内容からform上の各要素に値を戻します

サブミット前にsaveValueを行い、bodyロード時にrestoreValueをするのが一般的な使い方になると思います。

ユーザにとって見れば「前回のサブミット時の値が保持されているだけ」の状態であり、極めて自然なUIになります。

ページトップへ



(C) RECRUIT MEDIA COMMUNICATIONS CO., LTD.