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接続でのみクッキーを使用するかどうか |
有効範囲の既定値は、クッキーが設定されたドキュメントのパスです。そして読み込み時はこのパスが前方一致で比較されるため、有効範囲を明示しない場合、ドキュメントより上位のディレクトリではそのクッキーを読み込めなくなります。
名前=値; 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();
のようにします。
クッキーを保存する期間がブラウザで指定されている場合、有効期限はブラウザの設定で上書きされます。またブラウザ終了時にクッキーを削除するように設定されている場合、有効期限にかかわらず削除されます。
クッキーの値は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();
ブラウザに書き込まれたクッキーは、そのブラウザのツールでも確認できます。ツールによっては編集や削除の機能を備えるものもあり、読み書きしたクッキーの確認に役立ちます。