jQueryで入力フォームなどのニックネーム(名前)等をブラウザに記憶させる

jQueryを使って、入力フォームなどでニックネーム(名前)等の情報をブラウザに記憶させる方法です。例えばブログのコメント入力欄に名前、メールアドレス、webサイト、本文といった形で入力フォームが存在した場合に、毎回名前を入力したり、メールアドレスやwebサイトを入力する手間を減らす補助としてそういった箇所の入力フォームの情報をブラウザに記憶させてやると便利です。

jQueryでフォームの内容を記憶させる

今回はjQueryでフォームの入力の内容を記憶させるのですが、記憶させる先にはブラウザのローカルストレージ領域に保存します。cookieでも保存が可能ですが、ローカルストレージへ保存はプラグイン等使わずに簡単に行えることと有効期限が無いのでローカルストレージへ保存する事にします。

保存済みの情報をフォームのinput要素へ挿入する

//ローカルストレージから取得して挿入
$("#comment_form input[name=comment_name]").val(localStorage.getItem("comment_name"));
$("#comment_form input[name=comment_email]").val(localStorage.getItem("comment_email"));
$("#comment_form input[name=comment_website]").val(localStorage.getItem("comment_website"));


//eachでまとめたケース
$("#comment_form input").each(function(){
 var key = $(this).attr("name");
 $(this).val(localStorage.getItem(key));
});

localStorage.getItem(key) この形で、ブラウザのローカルストレージへの保存済みの情報を取得してinput要素の値に挿入しています。

今回はキーを次のようにしています、これらのキーはローカルストレージへの保存にも共通して使います。

コメント名のキー = comment_name
コメント欄のメールアドレス = comment_email
コメント欄のウェブサイトURL = comment_website

フォームのinputを監視して、情報をローカルストレージへ随時保存する

//inputの内容を記録する
$("#comment_form input").on( "blur",function(){
  var val = $(this).val();
  var key = $(this).attr("name");
  localStorage.setItem(key,val);
});

input の内容を記憶します、コメント欄のinput要素を全て監視し blur があった時に保存を実行しています。本文はinputではなくtextareaが基本的に使われるので含まれません。また blur とはフォーカスが外れた時のことです。入力欄から別の入力欄にフォーカスが移動した時や、入力欄から送信ボタンを押すことでフォーカスが移動した時に、内容が確定したものをみなしてinput要素の値をキーと値のセットでローカルストレージに保存します

保存のプロセスは、フォーカスが外れた要素の値を取得し、次にその要素のnameを元にキーを作り出し。その二つの情報を localStorage.setItem(key,value)という関係で保存しています。

全体的なコード

$(window).load(function(){
  //フォームのinputの選択(指定)
  var comment_form = "#comment_form input";
  //inputの内容を保存されたものから挿入する
  $(comment_form).each(function(){
    var key = $(this).attr("name");
    $(this).val(localStorage.getItem(key));
  });
  
  //inputの内容を記録する
  $(comment_form).on( "blur",function(){
    var val = $(this).val();
    var key = $(this).attr("name");
    localStorage.setItem(key,val);
  });
});

全体的にまとめると、このようなコードになります。あとはフォームの方のnameの値を使ってキーとしますので、nameの方がほかのものと被らないように等してユニークな値にしてあげれば汎用的に利用できます。