【javascript】クッキーを渡す方法と受け取る方法

公開日：2013/12/20

更新日：2014/05/18

カテゴリー: javascript

javascriptで訪問者がアクションを起こしたとき、ブラウザにクッキーを渡す方法とそれを受け取る方法を説明します。

クッキーを渡す方法

一見複雑そうですが、javascriptでブラウザにクッキーを渡したい場合

document.cookie = '○○○=△△△';

を利用するだけです（○○○がクッキー名、△△△がクッキーの値）。クッキー名を変更すると、複数のクッキーをブラウザに渡すことができます。

なお、クッキーの値にはセミコロン「;」、カンマ「,」や空白、日本語を含めてはならないため、それらが含まれる可能性がある場合、「encodeURIComponent」関数でエンコードする必要があります。

document.cookie = '○○○=' + encodeURIComponent('△△△');

クッキーの読み書きのマニュアルはこちらを参照して下さい。

有効期限をつける

クッキーの有効期限は、何も指定しなければブラウザが閉じられるまで有効ですが、こちら側で有効期限を設定することもできます。

その場合、「max-age」属性を使用します（秒数で指定）。

document.cookie = '○○○=△△△; max-age=60*60*24';

これで「○○○=△△△」というクッキーが86400秒（つまり1日）有効となります。

有効範囲を決める

クッキーの有効範囲は、何も指定しなければ「有効ドメイン」はクッキーを渡したドメインに、「有効パス」はクッキーを渡した場所となります。すなわち、クッキーの有効範囲は、クッキーを渡したディレクトリ以下となります。

しかし、「domain」属性、「path」属性を設定することで任意の有効範囲を指定できます。

document.cookie = '○○○=△△△; domain=□□□.com; path=/; max-age=60*60*24';

この場合、クッキーの有効範囲は「□□□.com」以下となります（有効期限は1日）。

document.cookie = '○○○=△△△; domain=□□□.com; path=/hoge/; max-age=60*60*24';

とすれば、クッキーの有効範囲は「□□□.com」の「hoge」ディレクトリ以下となります。

document.cookie = '○○○=△△△; domain=.□□□.com; path=/; max-age=60*60*24';

とすれば、クッキーの有効範囲は「（任意のサブドメイン）.□□□.com」以下となります。

クッキーを受け取る方法

クッキーを受け取る場合も簡単で、以下を記述するだけです。

document.cookie;

これだけでブラウザに記憶させたクッキーを全て取得できます。

サンプル

サンプルとして、ユーザーがアクションを起こしたとき、「ysklog」というクッキー情報があれば「クッキーがあるよ」、なければ「クッキーがないよ」と表示したあとにクッキーを渡すスクリプトを書いてみたいと思います。

<script type="text/javascript">
<!--
function CookieCheck(){
	//ブラウザにあるクッキーの情報を取得
	String = document.cookie;
	//取得したクッキーに文字列「ysklog」があるか確認（「indexOf」は指定した文字列が何文字目にあるか検索するもの。なければ「-1」が返る）
	BooleanCheck = String.indexOf("ysklog",0);
	//クッキーの有り無しで処理を分岐
	if(BooleanCheck == -1){
		alert("クッキーがないよ");
		//ブラウザにクッキーを渡す
		document.cookie = 'data=ysklog';
	}else{
		alert("クッキーがあるよ");
	}
}
// -->
</script>

これをファイルの<head>～</head>の間に設置し、ファイルの任意の部分に以下を記述してクリックすると動作します。

<a href="" onClick="CookieCheck()">クッキーチェック</a>

この方法で、javascriptを利用してクッキーの有無を確認してなければ渡す、ある場合は任意の操作をさせる・・・などが可能になります。

あわせて読んでほしい！

Follow @ysklog_net 　

まだコメントはありません。

コメントフォーム

クッキーを渡す方法

有効期限をつける

有効範囲を決める

クッキーを受け取る方法

サンプル

関連してそうなオススメ記事

コメント