まだプログラマーですが何か？

プログラマーネタ中心。たまに作成したウェブサービス関連の話も https://twitter.com/dotnsf

タグ：cookie

今更感もありますが、久しぶりにウェブでクッキー（cookie）を使う機会があったのでまとめておきました。

普通の JavaScript だけで扱う場合と、jQuery Cookie を使って便利にする場合と、２通りで記載しています。



【JavaScript でクッキーを書き込む】
document.cookie に '名前=値' のペアを書き込む：

（例）
document.cookie = 'name1=value1';


名前にはセミコロン、カンマ、空白文字は利用できない。
値は UTF-8 で記載し、encodeURIComponent() でエンコードする。


複数の '名前=値' を書き込む場合は繰り返し実行する：

（例）
document.cookie = 'name1=value1';
document.cookie = 'name2=value2';  //. 最新の実行結果だけでなく、２つとも記憶される



パラメータで属性を指定することも可能：

（例）
document.cookie = 'name1=value1;path=/path1';   //. /path1/** 以下のパスにアクセスした場合だけ有効なクッキーを設定
document.cookie = 'name2=value2;max-age=3600';  //. クッキーの有効期限を秒数で設定（指定しないとブラウザ終了時に無効になる）
document.cookie = 'name3=value3;expires=Sun, 17 Dec 2017 01:27:14 GMT';  //. クッキーの有効期限をGMTで設定（指定しないとブラウザ終了時に無効になる）



【JavaScript でクッキーを取り出す】
document.cookie の値をそのまま参照して取り出す：

（例）
var cookies = document.cookie;  //. 有効な '名前=値' のペアが、セミコロン区切りで取得できる



【JavaScript でクッキーを削除する】
「クッキーを削除する」関数は用意されていないので、「強制的に無効にする」方法を使います：

（例）
document.cookie = 'name1=value1;expires=Sat, 1 Jan 2000 00:00:00 GMT';



【jQuery Cookie とは？】
jQuery を使ってクッキーを便利・簡単に扱えるようにしたライブラリです。このライブラリを使う前に jQuery ライブラリを読み込んで置く必要があります：

（例）
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>


【jQuery Cookie でクッキーを書き込む】
$.cookie を使って名前と値を書き込みます：

（例）
$.cookie( 'name1', 'value1' );



オプションを指定することも可能です：

（例）
$.cookie( 'name1', 'value1', { expires: 7, path: '/path1' } ); //. /path1 以下のパスを指定して７日間保持



【jQuery Cookie でクッキーを取り出す】
$.cookie を使って、名前を指定してクッキーを取り出します：

（例）
var cookie = $.cookie( 'name1' );




【jQuery Cookie でクッキーを削除する】
$.removeCookie() を使って削除します：

（例）
$.removeCookie( 'name1' );


タグ ：
#javascript
#cookie

JavaScript にちょっとした工夫をすると、サブドメインの異なる２つのサイト（例えば www1.mydomain.com と www2.mydomain.com）でクッキーを共有することができる、らしい！

例えばこんな感じです。まずは http://www1.mydomain.com/setCookie.html でクッキーをセットします：
(setCookie.html)

<html>
<head>
<script type="text/javascript">
function setMyCookie(username, password) {
  var s=setMyCookieWithDomain("username",username);
  document.cookie = s;
  var t=setMyCookieWithDomain("password",password);
  document.cookie = t;
  alert(s+"\n"+t); // 保存内容を確認表示
}
function setMyCookieWithDomain(key,val){
  var str = escape(key) + "=" + escape(val);
  str += "; domain=.mydomain.com"; // 頭に "." を付けたドメイン名を指定（ここがカギ！）
  return str;
}
</script>
</head>
<body>
<input type="button" value="test1-set" onclick="setMyCookie('username1','password1')">
<input type="button" value="test2-set" onclick="setMyCookie('username2','password2')">
</body>
</html>


次に http://www2.mydomain.com/getCookie.html で http://www1.mydomain.com/setCookie.html でセットしたクッキーを取り出します。サブドメインの異なる２つのサーバー間で同じクッキーをやりとりしている点に注目：
(getCookie.html)

<html>
<head>
<script type="text/javascript">
function getMyCookieWithDomain() {
  var s="";var t="";
  cookies = document.cookie.split("; ");  // www1 でセットしたクッキーを www2 で取り出している
  for (i = 0; i < cookies.length; i++) {
    str = cookies[i].split("=");
    if (unescape(str[0]) == "username") s="id = "+unescape(str[1]);
    else if (unescape(str[0]) == "password") t="pass= "+unescape(str[1]);
  }
  return s+"\n"+t;
}
</script>
</head>
<body>
<input type="button" value="TEST" onclick="alert(getMyCookieWithDomain())">
</body>

上記のように、クッキーを設定する際（getCookie.html）のドメイン指定時に、頭に "." を付けたドメイン（"mydomain.com" ではなく ".mydomain.com"）を指定して保存します。これがカギのようです。

これで、www1.mydomain.com でクッキーを設定した後に www2.mydomain.com でそのクッキーを取り出して使う、という処理が実現できます。異なるアプリケーションサーバーで同じ情報を覚えさせて使う場合に便利な方法ですよね。

なお、上の例ではユーザー名とパスワードをクッキーに保存して取り出す、というサンプルを紹介していますが、実際のアプリではパスワードをクッキーに入れるのは危険なので、あまりオススメしません（苦笑）。


タグ ：
#javascript
#cookie

このページのトップヘ