JavaScriptでCookie / LiosK-free Blog

JavaScriptでCookie

2007-05-09
カテゴリ: Client Side
タグ: JavaScript Cookie Tips

[追記(2007-07-20)]実は有効期限を指定するのは簡単だったので、別の記事を書きました。

document.cookieの挙動に戸惑った。

読み込み

var cookie = document.cookie;

とやると、

キー=値; キー=値; キー=値; キー=値

というように、キーと値がイコール(=)でつながれて、それぞれの組がセミコロン＋スペース(; )で区切られた文字列になって出てくる。

あとはこの文字列を適当にパースして、目的のキーに対応する値を抜き出してやればよい。

書き込み

document.cookie = 'キー=値; expires=有効期限; domain=有効ドメイン; path=有効パス; secure';

という風に、キーと値の組と設定情報の組をセミコロンでつないだ文字列を代入してやればよい。expiresから後ろの項目は自由に省略可。具体的には↓みたいな感じ。

document.cookie = 'foo=hello; expires=Mon, 7-May-2007 12:00:00 GMT';
document.cookie = 'bar=world; path=/example';

書き込む時には、1件づつ書き込む。すでに指定したキーが存在する場合は上書きされる。

で？

document.cookieに代入する時は1件づつなのに、document.cookieから値を取得すると複数件のcookie情報が返ってくる。

内部的にget/setメソッドが呼ばれているだけなんだろうけど、どうもECMAScript的直感に反する。

var before = 'foo=bar; expires=Mon, 7-May-2007 12:00:00 GMT';

document.cookie = before;
var after = document.cookie;

window.alert(before == after);    /* false */

↑このコードがどうしても直感に反する。ECMAScriptの仕様ではget/setメソッドは使えなかったような気が…

と、言っててもしょうがないので

JavaScriptでCookieを手軽に扱う関数を書いてみる。

読み込みに関しては、forループで回してキーを探すようなコードをよく見るけど、最近のブラウザなら正規表現を使ってしまえばいいでしょう。

var cookie = {};

cookie.get = function(name) {
    var regexp = new RegExp('; ' + name + '=(.*?);');
    var match  = ('; ' + document.cookie + ';').match(regexp);
    return match ? decodeURIComponent(match[1]) : '';
}

書き込みは、Cookie風の日付を生成するのが面倒なので、有効期限は勝手に20年後くらいに固定してしまえば、だいぶシンプルになります。

cookie.set = function(name, value) {
    var buf = name + '=' + encodeURIComponent(value);
    document.cookie = buf + '; expires=Mon, 31-Dec-2029 23:59:59 GMT';
}

かなりの手抜き実装ですが、ほとんどの場合これで十分なのではないかと。

↓コンパクト版

/** MiniCookie */
var cookie = {
  get:function(n,m){return (m=('; '+document.cookie+';').match('; '+n+'=(.*?);'))?decodeURIComponent(m[1]):''},
  set:function(n,v){document.cookie=n+'='+encodeURIComponent(v)+'; expires=Mon, 31-Dec-2029 23:59:59 GMT'}
}

トラックバックURL

http://liosk.blog103.fc2.com/tb.php/4-dcf8a5e5

1 件のトラックバック

[JavaScript + Cookie]実は有効期限指定がすごく簡単だった件について

Cookieの有効期限を指定するときって、NetscapeのCookie仕様に従うと、document.cookie = 'name=value; expires=Thu, 1-Jan-2030 00:00:00 GMT';のような書式で書かなければいけない。strftimeのような関数がない

2007-07-20
発信元: 文系大学的IT系の悲哀

LiosK-free Blog