JavaScriptのクッキーはString型であり、ただの文字列です。よってこれを処理する専用のメソッドは存在しないため、文字列を処理するメソッドを使用して読み書きします。そしてクッキーはHTMLDocumentのプロパティとして実装されているため、document.cookieからアクセスできます。
クッキーを受け入れないようにブラウザで設定されている場合には、クッキーを書き込むことはできません。
クッキーに書き込むには[名前=値]の形式で、documentのcookieプロパティに設定します。具体的には、
document.cookie = 'data1=123'; document.cookie = 'data2=abc';
のようにします。複数の項目を書き込むには、くり返しcookieプロパティに設定します。このように書き込んだクッキーは、
data1=123; data2=abc
のように格納されます。
クッキーの値にはセミコロン ( ; )、カンマ ( , ) や空白を含めてはならないため、書き込む値はencodeURIComponent()でエンコードするのが安全です。
document.cookie = 'data=' + encodeURIComponent( data );
クッキーに有効範囲や寿命を設定するには、
名前=値; 属性1=値; 属性2=値;
の書式で属性を付加します。
| 分類 | 属性 | 説明 |
|---|---|---|
| 有効範囲 | path | クッキーが有効なパス |
| domain | クッキーが有効なドメイン | |
| 寿命 | max-age | クッキーの有効期限 (秒数で指定) |
| expires | クッキーの有効期限 (日時で指定) [非推奨] | |
| セキュリティ | secure | HTTPS接続でのみクッキーを使用するかどうか |
| samesite | Set-Cookieヘッダのsamesite属性。いつクッキーが送信されるか |
有効範囲の既定値は、クッキーが設定されたドキュメントのパスです。そして読み込み時はこのパスが前方一致で比較されるため、有効範囲を明示しない場合、ドキュメントより上位のディレクトリではそのクッキーを読み込めなくなります。
名前=値; path=パス
たとえばパスを「/dir/」と設定するならば、
document.cookie = 'data=123; path=/dir/'
とします。
有効期限を明示しない場合、そのクッキーはブラウザを終了すると削除されます。この期限を制御するには、max-age属性を設定します。
名前=値; max-age=秒数
max-age属性が有効ではない場合は、expires属性を使用します。たとえば有効期限を1日とするには、
var expire = new Date(); expire.setTime( expire.getTime() + 1000 * 3600 * 24 ); document.cookie = 'data=123; expires=' + expire.toUTCString();
のようにします。
クッキーを保存する期間がブラウザで指定されている場合、有効期限はブラウザの設定で上書きされます。またブラウザ終了時にクッキーを削除するように設定されている場合、有効期限にかかわらず削除されます。
samesiteで、クッキーがクロスサイト リクエストで送信されるかどうかを制御できます。
| 値 | 送信される状況 |
|---|---|
| strict | 同一サイトだけ |
| lax | 同一サイトのリクエストと最上位のGETリクエスト |
| none | すべて |
Google Chrome 80以降、samesiteが未指定のときは"none"ではなく"lax"として扱われるようになりました。カゴに入れた商品が消える？「Chrome 80」のリリースで注目の「SameSite（セイムサイト）属性」の影響と対策 | E-Commerce Magazine Powered by futureshop | ネットショップ担当者フォーラム (2020/03/09)
Firefoxではsamesiteが未指定だと「Cookie “***” に正しい “SameSite” 属性の値が設定されていません。“SameSite” 属性を持たない Cookie またはその属性値が不正なものの値は “Lax” として扱われます。これは、Cookie が第三者のコンテキストに送信されないことを意味します。あなたのアプリケーションがこのようなコンテキストで利用可能になっている Cookie に依存する場合は、“SameSite=None” 属性を追加してください。“SameSite” 属性についての詳細は https://developer.mozilla.org/docs/Web/HTTP/Headers/Set-Cookie/SameSite をお読みください。」として警告されます。
クッキーの値はdocument.cookieから得られます。ただし複数のクッキーを書き込んでいた場合には、それらはすべて'data1=123; data2=abc'のような連結した状態で取得されます。よって個別のクッキーの値を取得するには、これを分割する処理が必要になります。
読み込まれる値は文字列のため、文字列以外に評価される場面では型変換に注意が必要です。
document.cookie.split( '; ' )[ 0 ].split( '=' )[ 1 ];
function GetCookie( name )
{
var result = null;
var cookieName = name + '=';
var allcookies = document.cookie;
var position = allcookies.indexOf( cookieName );
if( position != -1 )
{
var startIndex = position + cookieName.length;
var endIndex = allcookies.indexOf( ';', startIndex );
if( endIndex == -1 )
{
endIndex = allcookies.length;
}
result = decodeURIComponent(
allcookies.substring( startIndex, endIndex ) );
}
return result;
}
クッキーの名前をキーとした連想配列で、すべてのクッキーを得られます。
function GetCookies()
{
var result = new Array();
var allcookies = document.cookie;
if( allcookies != '' )
{
var cookies = allcookies.split( '; ' );
for( var i = 0; i < cookies.length; i++ )
{
var cookie = cookies[ i ].split( '=' );
// クッキーの名前をキーとして 配列に追加する
result[ cookie[ 0 ] ] = decodeURIComponent( cookie[ 1 ] );
}
}
return result;
}
なお、この処理はURLのクエリを分割する方法と基本的に同一です。
有効期限を過去の日時とすることで、クッキーを削除できます。
var date = new Date(); date.setTime( date.getTime() - 1 ); document.cookie = 'data=; expires=' + date.toUTCString();
ブラウザに書き込まれたクッキーは、そのブラウザのツールでも確認できます。ツールによっては編集や削除の機能を備えるものもあり、読み書きしたクッキーの確認に役立ちます。