第3章 応用・JavaScript関連技術

Cookie

2017年7月19日

Cookieの概要

Cookieとは、ブラウザを通して訪問者のコンピュータに情報を記録するための機構です。情報は指定した期間保存され、必要になった際にその情報を取得することができます。これは、ユーザごとにパーソナライズして提供するようなサービスや、セッション管理する場合などに有用です。

Cookieの書き込みと読み込み

Cookieはdocument.cookieプロパティを使って情報を記録・取得します。

document.cookie	= "data=A";

上記のように名前と値のペアを指定すると、document.cookieプロパティにdataとAのペアを記録します。
記録した値はdocument.cookieプロパティを使ってアクセスできます。CookieはHTTPヘッダの情報として扱われ、記録した情報はその後のHTTPヘッダに含まれることになります。Cookieを発行した時点のHTTPヘッダには含まれないので、記録した情報を取得したい際は、リロードする必要があるので、注意してください。
次のようにしてdocument.cookieプロパティに記録した場合、その時点でdocument.cookieプロパティにアクセスするとundefinedが返されます。
ページをリロードすると、リロード前に記録した情報が取得されます。

document.cookie	= "data=A";
console.log( document.cookie );
data=A; APISID=***; SAPISID=***...

document.cookieプロパティは名前と値のペア以外に、Cookie情報を付加して返します。値だけ取り出すためには複雑な文字列処理が必要になるので、通常はCookie用のライブラリなどを利用します。

属性

document.cookieプロパティは名前と値のペア以外に、有効期限や有効なドメイン、パス情報、セキュリティなどを制御するための属性があります。各属性はイコールを使って属性名と値のペアを指定し、それぞれの属性をセミコロン( ; )で区切ります。

document.cookie = "data=A; expires=Tue, 1 Jan 2019 12:00:00 UTC; path=/a; domain=example.jp;";

上記では、dataというラベルに A という値を記録しています。example.jp/a 以下にあるファイルであれば、この記録を呼び出すことができます。この記録は、ユーザが削除しない限り2019年1月1日まで記録されています。

属性の詳細
書式 設定
名前=値 Cookie名と値を指定。セミコロン( ; )、カンマ( , )、スペース( )や日本語を使用する際には、エンコードする必要があります。
domain=ドメイン名 有効なドメインを指定。domain属性には、Cookieの取得を許可するドメイン名の全体、もしくは一部を指定します。省略した場合はウェブサーバの「ホスト名.ドメイン名」になります。
[例] domain=www.example.jp
path=パス 有効なパス情報を指定。path属性 には、Cookie情報の取得を許可するURLパス情報を指定します。
パス情報に/aを指定した場合、/a/**.htmlや/a/sub/**.htmlなど、/aにマッチした場合だけCookie情報にアクセス可能になります。デフォルトではルートを示す/です。
expires=GMT値 有効期限を指定。Cookieの有効期限を指定します。有効期限内はCookie情報が保存されます。
[書式] Wdy, D-Mon-YYYY HH:MM:SS GMT
過去の値を指定するとCookie情報が削除されます。この項目を省略した場合、クライアント側のキャッシュに限定して記録され、セッション終了時に削除されます。 つまり、expires属性を設定しない場合、ブラウザが閉じられるまでが有効期限となります。
secure セキュア接続フラグを設定。secure属性を記述しておくと、 サーバーとの接続がセキュアである時のみ、Cookie情報が有効になります。

複数のCookie情報を記録する場合

複数のCookie情報がある場合、次のようにdocument.cookieプロパティに代入できます。

document.cookie	= "data1=A";
document.cookie	= "data2=B";
console.log( document.cookie );

2回目の代入で1回目が上書きされたりせず、data1、data2どちらもきちんと記録されます。

js-cookie

js-cookieは元々jQueryのCookie用プラグインでしたが、単体で利用できるようになりました。
Githubにて開発が進められています。

js-cookie
https://github.com/js-cookie/js-cookie

ライブラリの読み込み

Githubからダウンロードできますが、ここではCDNを利用します。

<script src="https://cdnjs.cloudflare.com/ajax/libs/js-cookie/2.1.4/js.cookie.min.js"></script>

利用方法

js-cookieのset()を使ってdataとAのペアを記録します。

Cookies.set('data', 'A');

記録した値はget()を使ってアクセスできます。

console.log( Cookies.get('data') );

属性の指定

有効期限を7日に設定するには次のようにします。

Cookies.set('name', 'value', { expires: 7 });

さらに属性を追加する場合は下記のようになります。

Cookies.set('name', 'value', { expires: 7, path: "", domain: "subdomain.example.com", secure: true });

秒単位で有効期限を設定したい場合、ミリ秒単位を指定してください。

var date = new Date();
date.setTime(date.getTime() + (10*1000));
Cookies.set("data", "A", { expires: date });

上記では有効期限を10秒に設定しています。

Cookieの削除

Cookieの削除はremove()に削除したい名前を指定します。

Cookies.remove(data);

JSON

js-cookieはJSON形式のデータ保存、取得もサポートしています。

Cookies.set("key", { foo: "bar" });

get()だと文字列が返されるので、JSON形式で取得したい場合はgetJSON()を使います。

Cookies.getJSON("key"); 

エンコード

Cookieは、特殊記号や日本語文字を扱う場合はエンコード・デコード処理が必要になります。
ただし、js-cookieを使う場合は自動でエンコードされるので、自前の文字コード処理は不要です。

Cookieを拒否するためのブラウザ設定

ウェブサーバは Set-CookieヘッダによりCookieを利用できますが、ユーザはブラウザの設定で Cookie 機能を無効にしたり、削除することができます。

インターネット・エクスプローラのCookie管理方法
https://support.microsoft.com/ja-jp/help/17442/windows-internet-explorer-delete-manage-cookies
ChromeのCookie管理方法
https://support.google.com/chrome/answer/95647?co=GENIE.Platform%3DDesktop&hl=ja

Comment

コメントを残す

メールアドレスが公開されることはありません。

関連記事

リズムファクトリーはホームページの制作会社です。
ホームページ制作に関するご要望・ご相談はこちらからどうぞ。

株式会社リズムファクトリーでは現在、下記の職種について人材募集を行っております。
求人をクリックすると「求人情報サイトFind Job!」の求人詳細画面が開きますので、こちらからご応募下さい。

提供 : Webな人の求人情報サイト Find Job!