JavaScriptでCookieの取得・追加・更新・削除・有効期限の設定 | cookieの操作

Cookie-Set-Get

SHARE

こんにちはフロントエンドエンジニアのまさにょんです！

今回は、JavaScriptでCookieの取得・追加・更新・削除・有効期限の設定などのcookie操作について解説します。

Cookieの追加・更新(Set)

基本的なCookieの追加・更新をする

Cookie を書き込む場合は、 document.cookie に対して値を代入します。

基本構文: document.cookie = ‘CookieKey=CookieValue’;

Cookieに追加したい値は「 key=value 」の形でSetします。

複数のCookieを保存できますが、1度に追加できるのは1つだけです。

Cookieの値を更新したい場合は、同じkeyにもう一度、値をSetすればOKです。

// [ 基本的なCookieの追加・更新をする ]

// 1. Cookie を書き込む場合は、 document.cookie に対して値を代入します。
// Cookieに追加したい値は「 key=value 」の形でSetします。
// 複数のCookieを保存できますが、1度に追加できるのは1つだけです。

document.cookie = 'robotama=ロボ玉';
document.cookie = 'from=Tokyo';

// 2. 同じkeyにもう一度、値をSetすれば、CookieをUpdateできる。
document.cookie = 'from=埼玉';

エンコーディングしてCookieを追加する

Cookie-Valueをエンコーディングするためには、encodeURIComponent() を使用します。


// [ エンコーディングしてCookieを格納する ]

const saitama = encodeURIComponent('さいたまー共和国');
console.log({saitama});
    // {saitama: '%E3%81%95%E3%81%84%E3%81%9F%E3%81%BE%E3%83%BC%E5%85%B1%E5%92%8C%E5%9B%BD'}

document.cookie = `saitama=${saitama}`;

document.cookie = `gunma=${encodeURIComponent('神聖グンマー帝国')}`;

Cookieの取得(Get)

すべてのCookieを取り出す

document.cookie の中に、Cookieの情報が格納されています。

構文: const cookieData = document.cookie;

なので、上記のように記述すると登録されているCookieのデータを変数に格納することができます。

Cookieは「 key=value 」の形で保存されます。

複数ある場合は「 ‘key1=value1; key2=value2’ 」のような形で「; 」区切りで保存されています。

// [ すべてのCookieを取り出す ]

// 1. document.cookie の中に、Cookieの情報が格納されています。
const cookieData = document.cookie;

// 2. Cookieは、「 key=value 」の形で保存されます。
// 複数ある場合は「 'key1=value1; key2=value2' 」のような形で「; 」区切りで保存されています。

console.log({cookieData});
// {cookieData: 'robotama=ロボ玉; gunma=%E7%A5%9E%E8%81%96%E3%82%B0%E3…BD; from=埼玉; hakutou=白桃; hakutou2=白桃2; momo=ももちゃん'}

特定のcookieだけ取り出したい場合

先述のとおり、Cookieが複数Setされている場合は「 ‘key1=value1; key2=value2’ 」のような形で「; 」区切りで1つの文字列として保存されています。

なので、特定のcookieを取り出すには、この文字列を分解して、希望のkeyを指定して取り出すしかありません。

つまり、文字列を分解してから、Cookie-Keyを指定して、Cookie-Valueを取り出すような実装になります。

// [ 特定のcookieだけ取り出したい場合 ]

const cookieData = document.cookie;

// 1. 複数ある場合は「 'key1=value1; key2=value2' 」のような形で「; 」区切りで保存されています。
console.log({cookieData});
// {cookieData: 'robotama=ロボ玉; gunma=%E7%A5%9E%E8%81%96%E3%82%B0%E3…BD; from=埼玉; hakutou=白桃; hakutou2=白桃2; momo=ももちゃん'}


// 2. 綺麗に分割するために「'; '」(セミコロン&半角スペース)で区切る！
const cookieDataList = cookieData.split('; ');
console.log({cookieDataList});
    // cookieDataList: Array(6)
    // 0: "robotama=ロボ玉"
    // 1: "gunma=%E7%A5%9E%E8%81%96%E3%82%B0%E3%83%B3%E3%83%9E%E3%83%BC%E5%B8%9D%E5%9B%BD"
    // 2: "hakutou=白桃"
    // 3: "hakutou2=白桃2"
    // 4: "momo=ももちゃん"
    // 5: "from=埼玉"
    //     length: 6

for (const cookie of cookieDataList) {
    const cookieSplit = cookie.split('=');
    console.log({cookieSplit});

    // 3. key名を指定して、Cookie-Valueを取り出します。
    if (cookieSplit[0] === 'robotama') {
        console.log(cookieSplit[1]);
            // ロボ玉
    }
}

正規表現を使って、Pattern-Match で、Cookie-Valueを取り出すパターン

// [ 特定のcookieだけ取り出したい場合 ]

const cookieData = document.cookie;

// 1. 複数ある場合は「 'key1=value1; key2=value2' 」のような形で「; 」区切りで保存されています。
console.log({cookieData});
// {cookieData: 'robotama=ロボ玉; gunma=%E7%A5%9E%E8%81%96%E3%82%B0%E3…BD; from=埼玉; hakutou=白桃; hakutou2=白桃2; momo=ももちゃん'}


// 2. 綺麗に分割するために「'; '」(セミコロン&半角スペース)で区切る！
const cookieDataList = cookieData.split('; ');
console.log({cookieDataList});
    // cookieDataList: Array(6)
    // 0: "robotama=ロボ玉"
    // 1: "gunma=%E7%A5%9E%E8%81%96%E3%82%B0%E3%83%B3%E3%83%9E%E3%83%BC%E5%B8%9D%E5%9B%BD"
    // 2: "hakutou=白桃"
    // 3: "hakutou2=白桃2"
    // 4: "momo=ももちゃん"
    // 5: "from=埼玉"
    //     length: 6

for (const cookie of cookieDataList) {
    const cookieSplit = cookie.split('=');
    console.log({cookieSplit});

    // 3. 正規表現を使って、Pattern-Match で、Cookie-Valueを取り出すパターン
    const pattern = /^fr/;
    if (cookieSplit[0].match(pattern)) {
        console.log(cookieSplit[1]);
            // 神聖グンマー帝国
    }

}

encodeURIComponent() でエンコーディングしたものを取り出すパターン

encodeURIComponent() でエンコーディングしたものを取り出す場合は、decodeURIComponent()でデコードします。

// [ 特定のcookieだけ取り出したい場合 ]

const cookieData = document.cookie;

// 1. 複数ある場合は「 'key1=value1; key2=value2' 」のような形で「; 」区切りで保存されています。
console.log({cookieData});
// {cookieData: 'robotama=ロボ玉; gunma=%E7%A5%9E%E8%81%96%E3%82%B0%E3…BD; from=埼玉; hakutou=白桃; hakutou2=白桃2; momo=ももちゃん'}


// 2. 綺麗に分割するために「'; '」(セミコロン&半角スペース)で区切る！
const cookieDataList = cookieData.split('; ');
console.log({cookieDataList});
    // cookieDataList: Array(6)
    // 0: "robotama=ロボ玉"
    // 1: "gunma=%E7%A5%9E%E8%81%96%E3%82%B0%E3%83%B3%E3%83%9E%E3%83%BC%E5%B8%9D%E5%9B%BD"
    // 2: "hakutou=白桃"
    // 3: "hakutou2=白桃2"
    // 4: "momo=ももちゃん"
    // 5: "from=埼玉"
    //     length: 6

for (const cookie of cookieDataList) {
    const cookieSplit = cookie.split('=');
    console.log({cookieSplit});

    // 3. encodeURIComponent() でエンコーディングしたものを取り出すパターン
    if (cookieSplit[0] === 'gunma') {
        
        // 4. decodeURIComponent() でデコードする
        console.log(decodeURIComponent(cookieSplit[1]));
            // 埼玉
    }
}

Cookieの賞味期限(有効期間)の設定は、2種類ある

max-age: 指定した秒数だけ有効期限になる

max-ageで指定した秒数だけ有効期限になります。

max-ageとexpires両方あったらmax-ageが優先されるので、注意が必要です。

// 1. max-age で指定した秒数まで有効期限を設定する
const max_age = 60 * 5; // 5分後

document.cookie = 'hakutou=白桃' + `;max-age=${max_age}`;

document.cookie = 'hakutou2=白桃2; max-age=300;'; // 5分後

expires: 指定した日付までが有効期限になる

expiresで指定した日付までが有効期限になります。


// 5. expires で指定した日付までの有効期限を設定する
const now = new Date();
console.log({now});
now.setMinutes(now.getMinutes() + 5); // 5分後
console.log({now});

const expires = now.toUTCString();
console.log({expires});

document.cookie = `momo=ももちゃん; expires=${expires}`;

Cookieを削除する3つの方法

document.cookie = “削除対象のkey名=; max-age=0”;

// 1. document.cookie = "削除対象のkey名=; max-age=0"; で削除できる。
document.cookie = 'saitama=; max-age=0';

document.cookie = “削除対象のkey名=; expires=過去の日付”;

// 1. document.cookie = "削除対象のkey名=; expires=過去の日付"; で削除できる。
const passNow = new Date();
passNow.setYear(now.getYear() - 1);

document.cookie = `'saitama=; expires=${passNow.toGMTString()}`;

DevToolでCookieを削除する

DevTood上でCookieを管理することができます。

画面は、GoogleChromeのDevToolのアプリケーション画面です。

【 Google Chrome DevTool画面 】

DevTool上でCookieKeyとCookieValueの編集やCookieの削除もできます。

【 Cookieの編集や削除もできる 】

Sample-Code-全文(HTML)とHTML実行イメージ

【 HTML実行イメージ 】
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Cokkie-操作-Test🔥</title>
    <script>
        console.log('Cookieの存在Checkをします🔥');

        // 1. document.cookie の中に、Cookieの情報が格納されています。
        const cookieData = document.cookie;

        // 2. Cookieは、「 key=value 」の形で保存されます。
        // 複数ある場合は「 'key1=value1; key2=value2' 」のような形で「; 」区切りで保存されています。

        // 3. 最初は空だが、2回目以降のアクセスでは、CookieがSetされている。
        console.log({cookieData});
            // {cookieData: 'robotama=ロボ玉; from=神聖グンマー帝国; gunma=%E7%A5%9E%E8%81…9D%E5%9B%BD; hakutou=白桃; hakutou2=白桃2; momo=ももちゃん'}

        // 4. 特定のcookieだけ取り出したい
        // 特定のcookieを取り出すには前述したやつを分解して、希望のkeyで探して取り出すしかない。

        // 綺麗に分割するために「'; '」(セミコロン&半角スペース)で区切る！
        const cookieDataList = cookieData.split('; ');
        console.log({cookieDataList});
            // cookieDataList: Array(6)
            //     0: "robotama=ロボ玉"
            //     1: "from=神聖グンマー帝国"
            //     2: "gunma=%E7%A5%9E%E8%81%96%E3%82%B0%E3%83%B3%E3%83%9E%E3%83%BC%E5%B8%9D%E5%9B%BD"
            //     3: "hakutou=白桃"
            //     4: "hakutou2=白桃2"
            //     5: "momo=ももちゃん"
            //     length: 6

        for (const cookie of cookieDataList) {
            const cookieSplit = cookie.split('=');
            console.log({cookieSplit});

            // 4-1. key名を指定して、Cookie-Valueを取り出すパターン
            if (cookieSplit[0] === 'robotama') {
                console.log(cookieSplit[1]);
            }

            // 4-2. 正規表現を使って、Pattern-Match で、Cookie-Valueを取り出すパターン
            const pattern = /^fr/;
            if (cookieSplit[0].match(pattern)) {
                console.log(cookieSplit[1]);
            }

            // 4-3. encodeURIComponent() でエンコーディングしたものを取り出すパターン
            if (cookieSplit[0] === 'gunma') {
                
                // decodeURIComponent() でデコードする
                console.log(decodeURIComponent(cookieSplit[1]));
            }
        }

    </script>
</head>
<body>
    <h1>Cookieを食べたいロボ玉🔥</h1>

    <h2>CookieのSetとGetの基本</h2>

    <h3>1. CookieをSetする🔥</h3>
    <p>Cookie を書き込む場合は、 document.cookie に対して値を代入します。</p>
    <p>基本構文: document.cookie = 'CookieKey=CookieValue'</p>
    <p>Cookieに書き込む値は「 key=value 」の形で書き込みます。</p>
    <p>複数のCookieを保存できますが、1度に書きこみるのは1つだけです。</p>
    


    <h3>2. CookieをGetする🔥</h3>
    <p>document.cookie の中に、Cookieの情報が格納されています。</p>
    <p>Cookieは「 key=value 」の形で保存されます。</p>
    <p>複数ある場合は「 'key1=value1; key2=value2' 」のような形で「; 」区切りで保存されています。</p>


    <h3>3. Cookieの賞味期限(有効期間)の設定は、2種類ある🔥</h3>
    <p>max-age: 指定した秒数だけ有効期限になる</p>
    <p>expires: 指定した日付までが有効期限になる</p>
    <p>max-ageとexpires両方あったらmax-ageが優先される！</p>


    <h3>4. Cookieを削除する3つの方法🔥</h3>
    <p>document.cookie = "削除対象のkey名=; max-age=0";</p>
    <p>document.cookie = "削除対象のkey名=; expires=過去の日付";</p>

    <p>Google-ChromeなどDev-Tool上でも削除できます</p>


    <h3>参考・引用</h3>
    <ol>
        <li>
            <a href="https://qiita.com/dokkoisho/items/b415f1c9852c8fd12ec8">javascriptでcookie操作</a>
        </li>
    </ol>

    <script>
        // 1. ookie を書き込む場合は、 document.cookie に対して値を代入します。
        // Cookieに書き込む値は「 key=value 」の形で書き込みます。
        // 複数のCookieを保存できますが、1度に書きこみるのは1つだけです。

        document.cookie = 'robotama=ロボ玉';
        document.cookie = 'from=Tokyo';

        // 2. 同じkeyにもう一度、値をSetすれば、CookieをUpdateできる。
        document.cookie = 'from=埼玉';


        // 3. エンコーディングしてCookieを格納する

        const saitama = encodeURIComponent('さいたまー共和国');
        console.log({saitama});
            // {saitama: '%E3%81%95%E3%81%84%E3%81%9F%E3%81%BE%E3%83%BC%E5%85%B1%E5%92%8C%E5%9B%BD'}

        document.cookie = `saitama=${saitama}`;

        document.cookie = `gunma=${encodeURIComponent('神聖グンマー帝国')}`;

        // 4. max-age で指定した秒数まで有効期限を設定する
        const max_age = 60 * 5; // 5分後

        document.cookie = 'hakutou=白桃' + `;max-age=${max_age}`;

        document.cookie = 'hakutou2=白桃2; max-age=300;'; // 5分後


        // 5. expires で指定した日付までの有効期限を設定する
        const now = new Date();
        console.log({now});
        now.setMinutes(now.getMinutes() + 5); // 5分後
        console.log({now});

        const expires = now.toUTCString();
        console.log({expires});

        document.cookie = `momo=ももちゃん; expires=${expires}`;

        // 6. max-age=0 または expires=過去の日時 で削除できる
        document.cookie = 'saitama=; max-age=0';



    </script>
</body>
</html>

JavaScript書籍 Ver. 中級-上級者向け

JavaScript書籍 Ver. 初級者向け

プログラミング学習・エンジニア転職関連の情報

自宅で現役エンジニアから学べる『TechAcademy』 (エンジニア転職保証)

『GEEK JOBキャンプ』スピード転職コース（無料）

【IT道場】入校時0円！ 就職目的プログラミングスクール

エンジニア転職なら100％「自社開発」求人に強い【クラウドリンク】

『techgym』 (Python特化・無料)

Twitterやってます！Follow Me！

神聖グンマー帝国の逆襲🔥

神聖グンマー帝国の科学は、世界一ぃぃぃぃぃぃ！！！！！

参考・引用

  1. MDN: encodeURIComponent()

最近の投稿

【SQL】1回のINSERTで、複数行のレコードを一括挿入・一括追加する方法 JS_uuid JavaScriptでランダムなuuidを作成する方法(randomUUIDの使い方) py_csv_to_json PythonでCSVをJSONに変換する方法 py_csv_cut PythonでCSV・Dataframeを指定の行数まで切り取る方法 js_for_of JavaScript(TypeScirpt)のfor-of文でindexの値も取得する方法と、Type IterableIteratorエラーの解決方法 Python_VSCode VSCode上のPython import文の「インポート “XXXXX” をソースから解決できませんでした」エラーの解決方法

前の記事

dom-attribute
【JavaScript入門】DOM操作でHTMLタグの属性を操…

次の記事

【JavaScript入門】DOM操作で要素の削除をする方法 …
DOM-Element-Delete