JavaScriptでCookieを名前から読み取るシンプルな関数の実装方法

JavaScriptでCookieを名前を指定して読み取るには、document.cookieプロパティを活用するのが最も基本的かつ効率的な方法です。ここでは、すべてのCookieを読み取り、キー（名前）と値のペアに分解して表示するシンプルな関数を紹介します。

Cookieを読み取る関数のサンプルコード

以下の関数では、まずdocument.cookieで全Cookieを取得し、セミコロン（;）で分割して配列化します。その後、各要素をイコール（=）で分割することで、キーと値を取り出します。

function ReadCookie() {
    var allcookies = document.cookie;
    document.write ("All Cookies : " + allcookies );

    // Cookieのペアを配列として取得
    cookiearray = allcookies.split(';');

    // 配列からキーと値のペアを取り出す
    for(var i = 0; i < cookiearray.length; i++) {
        name = cookiearray[i].split('=')[0];
        value = cookiearray[i].split('=')[1];
        document.write ("Key is : " + name + " and Value is : " + value);
    }
}

処理の流れを解説

1. 全Cookieの取得

document.cookieは、現在のドキュメントに関連付けられたすべてのCookieを「名前=値; 名前=値; ...」という形式の文字列で返します。

2. 文字列の分割

split(';')を使うことで、個々のCookieごとに分割された配列が得られます。

3. キーと値の抽出

さらにsplit('=')で各Cookieを分解すれば、インデックス0に名前、インデックス1に値が格納されます。あとはループ処理で目的のCookieを探したり、一覧表示したりできます。

特定の名前のCookieだけを取得する場合

上記の関数は全Cookieを表示するものですが、実際の開発では特定の名前に一致するCookieだけを取得したいケースが多くあります。その場合は、以下のように関数を拡張すると便利です。

function getCookie(name) {
    const cookies = document.cookie.split(';');
    for(let i = 0; i < cookies.length; i++) {
        const c = cookies[i].trim();
        if(c.startsWith(name + '=')) {
            return decodeURIComponent(c.substring(name.length + 1));
        }
    }
    return null;
}

この関数は、指定した名前のCookieが存在すればその値を返し、存在しなければnullを返します。decodeURIComponent()を使うことで、URLエンコードされた値も正しく復元できる点に注意してください。