「あああ、せっかく書いた内容が消えちゃった＞＜」を防ぐjQueryプラグイン、Garlic.js

「ブラウザ上で長い返信を書いていたのに、目を話した隙にiPhoneがスリープモードになっていて、スリープモード解除してブラウザを見ようとしたら、なぜか勝手に再読み込みされて返信内容が消えてしまった・・・( ˘ω˘)」なんてことはありませんか？　僕はたまにあります。

こんな事故が起こらないようにするのもWebサービスとしてのおもてなしかも知れません。そんなおもてなしを簡単に実現できるのがGarlic.jsです。

対応ブラウザ

IE8+, Chrome 4+, FF 4+, Safari 4+, Opera 11+

使い方

jQueryと一緒に読み込む

書いている内容の保存はlocalStorageにされます。なので、IE6または7に対応する場合は上記のコードのようにlocalstorageshim.jsを読み込んで、localStorageをエミュレートする必要があります。ただこの場合、URLパス毎に64KB、ドメイン毎に640KBの容量制限があります。クッキーよりは容量大きいけれども、注意が必要ですね。

formタグにdata-persist属性を追加

これでフォームの書きかけの内容がlocalStorageに保存されるようになります。

破棄したい場合は

$('.destroyable').garlic('destroy');

これで保存内容を破棄できます。

その他機能についてはドキュメントをご参照あれ。

リロード事故の防止の一つの選択肢として

リロード事故を防ぐために、書きかけの項目があった場合には「本当に移動しますか？」みたいなアラートを出す手法はよく取られていますが、そもそも保存しておいてあげるのも親切で良いなと思いました。

スマホのブラウザで利用していると問答無用でリロードされてしまう（正確にはリロードではなく、スマホで見えている映像はスマホ内のキャッシュで、新しく接続して情報を取得しにいく）ケースがあるので、こういった仕掛けを導入しておくと、よりユーザーフレンドリーでしょう。

garlic.js