フォームの入力内容を保存してくれる「Garlic.js」は便利なプラグイン
2021年5月28日Garlic.jsはフォーム入力データをローカルストレージに保存し、再読み込みしても復元してくれるScriptです。
皆さんはＷＥＢサイトの入力フォームで、お問い合わせの際やショッピングサイトで購入の際、膨大に入力したフォームをなんらかの理由で入力し直さないといけないケースに遭遇したことはないでしょうか？
わたしは何度もあります。
今回紹介するGarlic.jsは、そのような問題を解決できるScriptです。
さて、まずは適当にフォームを作ります。
●ソース
<!DOCTYPE html>
<html lang=”ja”>
<meta charset=utf-8>
<body>
<h3>適当なフォーム</h3>
<form method=”post”>
<p> <input type=”text” name=”a”> </p>
<p> <textarea rows=5 cols=50 name=”b”></textarea> </p>
<p> <input type=”submit” value=”テスト”> </p>
</form>
</body>
</html>
かなりお手軽に作成しました。適当に作成したフォームにデータを入力し、
更新ボタンなどを押すと、通常入力内容は消えちゃいますね。
さて、上記のソースに本題のGarlic.jsを加えてみましょう。
まずはこちらのGarlic.jsをダウンロードします。もちろん、jQueryも用意しておきましょう。
さきほどのソースに以下を追加します。
●ソース
<!DOCTYPE html>
<html lang=”ja”>
<meta charset=utf-8>
<body>
<script src=”jquery.js”></script>
<script src=”garlic.js”></script>
<script>
$(function(){
$(“form”).garlic();
});
</script>
<h3>適当なフォーム</h3>
<form data-persist=”garlic” method=”post”>
<p> <input type=”text” name=”a”> </p>
<p> <textarea rows=5 cols=50 name=”b”></textarea> </p>
<p> <input type=”submit” value=”テスト”> </p>
</form>
</body>
</html>
さて、いよいよ実験です。
適当に仕上がったフォームにデータを入力し、更新ボタンを押してみましょう。
お～、消えてないです。
使い方もとても簡単、お手軽でおすすめ度は高いです。
原理はHTML5のLocalStorage APIを利用して、ローカルストレージに情報を保存しています。情報が消えるタイミングは送信ボタンを押すことで消える仕組みです。
今回は更新ボタンを使って説明しましたが、入力途中にブラウザを閉じてしまってもまた開き直せば情報が残っています。
WEBデザイナーのかたはこれを導入することで、ユーザーのフォームが消えてがっかりする姿を想像しなくて済みそうです。
関連サイト
パソコン教室
パソコン修理・販売・買取・サポート
