2013/01/20

javascriptでクッキーの読み書きを行う方法

カテゴリー:
タグ:

javascriptでクッキーの読み書きを行う方法をメモしておきます。先週公開した、はてブいじりでも使っている方法です。

jQueryでクッキーを扱うには?

昔、jQueryでクッキーを扱う機会があり、適当な関数がないかなぁと思って探してたんですけど、ないんですよね。しかし、素晴らしいプラグインがありました。jquery.cookie.jsというプラグインです。これを使えばクッキーは楽チンに扱えます。

が、ここでは、勉強がてら、自分で作ってみることにします。

javascriptでクッキーを設定するには?

jQueryでクッキーを扱う関数がない、ってのはなんとも不思議な気がしていました。だって、jQueryっていろんなことができるじゃないですか。クッキーについては作り忘れたとか、ありえないですよね。

が、ふと思いつきました。そもそも、javascriptでクッキーを扱う関数があるんじゃないかと。

で、探してみたら、実はもっと簡単でした。javascriptでクッキーを扱うには、次のようにします。

document.cookie = "key=value";

documentに、cookie属性ってのがあるんですね。あまりに簡単すぎて、これを知った時は衝撃でした。この記述で、keyにvalueが設定されます。なので、クッキーを書きこむ関数は次のようにすればOKなように思えます。

function setCookie(key, value){
  var cookie = key + '=' + value;
  document.cookie = cookie;
}

ただ、これでは、ブラウザを閉じたらクッキーが消去されてしまいます。そのため、有効期限の設定が必要となります。有効期限などのオプションは、セミコロンのあとに書き足せばOKです。一週間の有効期限付きでクッキーを設定する関数は次のようになります。

function setCookie(key, value){
  var date = new Date();
  date.setDate( date.getDate() + 7 );
  var cookie = key + '=' + value + '; expires=' + date.toGMTString();
  document.cookie = cookie;
}

有効期限を表すexpiresには、GMT形式の値を設定する必要があるため、「toGMTString」という関数を使っています。

javascriptでクッキーを読み込むには?

次は、クッキーの読み込みを行います。document.cookie の中にクッキーのデータが入っているので、このデータを解析するだけです。

function getCookie(key){
  var cookies = document.cookie.split('; ');
  for (var i = 0; i < cookies.length; i++){
    var c = cookies[i].split('=');
    if(c[0] == key){
      return c[1];
    }
  }
  return false;
}

まずは、クッキー情報をセミコロンとスペースで切ります。そしてクッキーの各キーに対して、イコールでスプリットすることで、キーと値をそれぞれ取得します。指定したキーがあればその値を、なければfalseを返す、という流れです。これで、キーからクッキーに保存されている値を取り出すことができるようになります。

前の記事:
次の記事: