クッキーの使用方法

JavaScriptのクッキーはString型であり、ただの文字列です。よってこれを処理する専用のメソッドは存在しないため、文字列を処理するメソッドを使用して読み書きします。

HTMLDocumentのクッキープロパティとして実装されているため、document.cookieでアクセスできます。

書き込み

クッキーを書き込むには、次の形式でdocumentのcookieプロパティに設定します。

名前=値

具体的には次のようにします。複数の項目を書き込むには、くり返しcookieプロパティに設定します。

document.cookie = 'data1=123';

document.cookie = 'data2=abc';

このように書き込んだクッキーは、次にように格納されます。

data1=123; data2=abc
クッキーの制限事項
制限事項 内容
ブラウザが保持できる数 300個以下
ブラウザが保持できるサーバごとの数 20個以下
１つのクッキー (名前と値を含む) のデータ量 4KB以下
※ 実際の制限はブラウザによって異なるため、この制限値より大きい場合もあります。
Internet Explorer で、ドメインあたりの Cookie の数の制限が 20 から 50 に増加する

設定値のエンコード

クッキーの値にはセミコロン ( ; )、カンマ ( , ) や空白 (   ) を含めてはならないため、値はencodeURIComponent()でエンコードするのが安全です。

document.cookie = 'data=' + encodeURIComponent( data );

属性の設定

クッキーに有効範囲や寿命を設定するには、属性を付加します。

分類 属性 説明
有効範囲 path クッキーが有効なパス
domain クッキーが有効なドメイン
寿命 max-age クッキーの有効期限 (秒数で指定)
expires クッキーの有効期限 (日時で指定) [非推奨]
セキュリティ secure https接続でのみクッキーを使用するかどうか

有効期限の設定

有効期限を明示しない場合、そのクッキーはブラウザを終了すると削除されます。この期限を制御するには、max-age属性を設定します。

名前=値; max-age=秒数

max-age属性が有効ではない場合は、expires属性を使用します。例えば有効期限を1日とするには、次のようにします。

var expire = new Date();
expire.setTime( expire.getTime() + 3600 * 24 );

document.cookie = 'data=123; expires=' + expire.toUTCString();

読み込み

複数のクッキーを書き込んだ場合、それらはすべて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のクエリを分割する方法と基本的に同一です。

参照

関連ページ