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を返す、という流れです。これで、キーからクッキーに保存されている値を取り出すことができるようになります。