クッキーの使用方法

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=パス

たとえばパスを「/foo/」と設定するならば、

document.cookie = 'data=123; path=/foo/'

とします。

寿命 (有効期限) の設定

有効期限を明示しない場合、そのクッキーはブラウザを終了すると削除されます。この期限を制御するには、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から得られます。ただし複数のクッキーを書き込んでいた場合には、それらはすべて1つの文字列として連結した状態で取得されます。たとえばそれは、

alert( document.cookie ); // 'data1=123; data2=abc' と表示される

のような形式です。よって個別のクッキーの値を取得するには、これを分割する処理が必要になります。

サンプルコード

指定クッキーの値の取得

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のクエリを分割する方法と基本的に同一です。

クッキーの管理ツール

ブラウザに書き込まれたクッキーは、そのブラウザのツールでも確認できます。そのツールによっては編集や削除の機能を備えるものもあり、読み書きしたクッキーの確認に役立ちます。

参考

参考書

  • JavaScript 第5版 [オライリー・ジャパン] David Flanagan
    19章「クッキーとクライアントサイドの永続性」