クッキーについて

クッキーについてまとめます。
クッキーは Web Storage(localStorage、sessionStorage)よりも馴染みがあり、
歴史的理由から古くから使われている手法です。

サーバサイド言語からも操作でき、元々はサーバサイド側からの利用用途が多くあります。
また、javascriptからもクッキーを操作することができます。

有効期間やスコープはクッキーごとに指定でき、このあたりもWeb Storageとは異なります。

クッキーの仕様

クッキーの仕様についてまとめます。
以下の仕様があります。

保存ファイル
ブラウザごとにテキストファイル形式で保存

1サイトでの最大数
最大20個まで(ブラウザによる)

1つの最大容量
4096バイト(約4KB)

有効期限
保存時に個別に指定する

ブラウザ間の読み込み
共有は不可

スコープ
同一出身ポリシー内で利用

クッキー使用可否の判定について

javascriptからクッキーが使用可能かを確認する方法があります。

Navigator.cookieEnabled

の値を取得することで、boolean(真/偽)値でクッキーが使用可能かがわかります。

クッキーの特徴について

クッキーの特徴(仕様)ついてまとめます。

・クッキーを保持する際は、サーバにHTTPヘッダが送信される(手法による)
・クッキーを保存する時に指定する
・有効期間を指定しないと、一時的な保存になる
・ブラウザの(最大)セッション期間との関連もあり、クッキー側だけで期間を自由に設定できない
・クッキー側からブラウザのセッション期間の上限を超えて保存する場合は、max-age属性(またはexpire属性)を使用する
・max-age属性とexpire属性を同時に設定した場合は、max-age属性が有効になる
・max-age属性は秒数で指定する
・max-age属性は負の値も設定できる
・expire属性は有効期限が切れる日時を指定する
・どちらの属性もブラウザのバージョンにより効かない場合がある
・path属性、domain属性
・path属性で設定されたパスに保存される
・path属性で設定されたパスに保存されたものは、サブディレクトリ(ネスト化)からは読み込み可能
・path属性で設定されたパスに保存されたものに、異なる親ディレクトリからは読み込みができない
・サブドメインから、メインドメイン側のクッキーを読み込みたい場合は、domain属性に「.ドメイン名」を指定し、path属性に「/」を指定すると読み込みができる。
・secure属性はネットワークを経由してクッキーを指定する論理値
・secure属性が「真」の場合は、https経由でのみクッキーの読み書きが可能
・クッキーの値にはセミコロン、カンマは使用不可です
・セミコロン、カンマを含む文字列を登録する場合は、文字列をエンコード(encodeURIComponent)して保存します(諸方法あり)

javascriptからクッキーの操作をする

javascriptからクッキーの操作をする方法をまとめます

クッキーの登録

基本的な形としては、

名前=値

となります。

コード上では、「test1」という名称のキーに、「testvalue123」という値を登録したい時は、次のように書きます。

document.cookie = "test1=testvalue123";

ただし、この方法では有効期限を設定していないので、デフォルトの保存期間になり、ブラウザを閉じると値が失われます。

では、上記の例に有効期限(秒)を設定して保持するように書きます。
例えば10分(600秒)の保持期間の場合は、次のように書きます。

document.cookie = "test1=testvalue123; max-age=600";

実際のアプリケーションでは、保持期間10分という時間を実用的な保持期間とすることは稀です。
また、値を格納する際は、秒→時間、時間→日、へと計算する工夫が必要です。

例えばクッキーの保持期間を1日(86,400秒)とする場合は、次のようになります。

// この場合は 
// 1秒 * 60で、60秒(1分)
// 60秒(1分) * 60(分) で、3600秒(1時間)
// 3600秒(1時間) * 24(時間)で、24時間(1日)
let cookie_test_time = 1 * 60 * 60 * 24;

document.cookie = "test1=testvalue123; max-age=" + cookie_test_time;

また、例えば5時間(18,000秒)にする場合は以下のようになります。

// この場合は 
// 1秒 * 60で、60秒(1分)
// 60秒(1分) * 60(分) で、3600秒(1時間)
// 3600秒(1時間) * 5(時間)で、5時間
let cookie_test_time = 1 * 60 * 60 * 5;

document.cookie = "test1=testvalue123; max-age=" + cookie_test_time;

計算式の一番最初の「1 *」は省略しても問題はないですが、ここでは秒を例える為に記載しています。

また、他の属性をパラメータに含める場合は、「;」(セミコロン)で区切って、続けて記述します。

クッキーの読み出し

javascriptからクッキーを読みだすと、domain属性で指定した範囲内のクッキーの値を全て読み込みます。

形としては

名前=値

の組み合わせで読み込まれます。
複数の名前がある場合は、「;」で区切られた形で連続したデータとして読み込まれます。

具体的には次のように書きます。

let load_cookie;

load_cookie = document.cookie;

上記の場合は、先程の例で保存した、「test1」という名称のキーと、「testvalue123」の値が取得できます。

また、値にセミコロンやカンマが含まれているデータは、文字列をデコードしたうえで処理をする必要があります。
その場合はjavascriptの組み込み関数の「decodeURIComponent」を使ってデコードをします。