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