フォームの内容を自動保存するjQueryプラグイン
ブラウザがクラッシュしたり、うっかりリロードしたり。
たくさんの時間をかけて入力したフォームの内容をあっという間に飛ばしてしまった経験は誰しもあると思います。
私はそういう事故が怖いので、長文の場合は自動保存機能のあるエディタやメーラー上で入力するようにしています。しかし、ユーザーの方にそれを望むのは無理というものですよね。
最近のCMSは大抵自動保存する仕組みがついています。そこまで本格的なものでなくてもいいから、簡単に導入できる、負荷の少ないフォームの自動保存機能、欲しくありませんか？
こんなご希望にぴったりのjQuery autosave plug-inをご紹介します。
機能の特徴
1.フォームに入力した内容をcookieに保存します（軽い）
2.formタグにあれこれ追記する必要はありません（簡単）
3.保存秒数等、細かい設定も可能です
4.さすがにリビジョンを指定して復元したりすることはできません
1.フォームに入力した内容をcookieに保存します（軽い）
データベースなどではなく、cookieに保存するため、サーバに負荷がかかりません。
ただしcookieの文字数制限などにはひっかかります。
2.formタグにあれこれ追記する必要はありません（簡単）
「簡単な導入方法」をご覧ください。
この簡単さゆえに、textareaのようなテキスト入力スペースのあるページには、このプラグインを全て導入しておくのがよいと思います。
3.保存秒数等、細かい設定も可能です
デフォルトでは10秒ですが、マイクロ秒単位で設定することが可能です。
4.で書くようにリビジョンを複数保存するわけではないので、(1)再度入力が大変なの分量を入力した時間で、かつ(2)「復元」ボタンを押すのに悩めるぐらいの時間（上書き保存してしまわないぐらいの時間）ということで、私は30秒に設定しています。
動作サンプル
お問い合わせに、実際に使っているページです。30秒毎に保存しているため、何か入力して、30秒待ってから一度ウィンドウを閉じてください。そして再度そのページを開いて「復元する」をクリックすると、前に入力した内容が自動的に入力されます。
簡単な導入方法
導入したいページのhead
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"> </script> <script type="text/javascript" src="/js/jquery.cookie.js"></script> <script type="text/javascript" src="/js/jquery.autosave.js"></script> <script type="text/javascript"> $(function () { $('form *').autosave({'interval': 30000,}); }); </script>
保存秒数がデフォルトのままでよければ、
$('form *').autosave();
でOKです。
ここにオプションを指定することで、保存するフォームを指定したりすることができます。
末尾の参考ページや、jQuery autosave plug-inのページをご覧ください。
上の3つのスクリプトは、各ページからダウンロードして、適切な箇所に設置してください。
ちなみに動作確認するまではjquery.autosave.jsは、「Full-fat Javascript」を使うことをオススメします。圧縮版は、私の手元では動作しませんでした。
導入したいページのbody
最低でも「復元する」ボタンが必要です（ページを開いたときに自動的にcookieから読み出してフォームに読込むようにはなっていません）。
手動で保存するボタンを組み込んだり、cookieに保存した内容をクリアしたりするリンクを組みこんだりすることもできます。具体的なソースは、jQuery autosave plug-inの動作サンプルを見るのがわかりやすいと思います。
まとめ
「復元する」ボタンの置き場所に困るぐらいで、手間なく簡単に導入できますから、textareaのあるページには全て導入するべきでしょう。
あっ、消えてしまった！という悲しい事故を防ぐには必須のプラグインだと思います。
jQuery autosave plug-in - rikrikrik
ブラウザが落ちてもフォーム内容が消えないようにするjQueryプラグイン「jQuery autosave」 - PHPSPOT開発日誌
http://phpspot.org/blog/archives/2010/01/jqueryjquery_au.html
