ものづくりのブログ

うちのネコを題材にしたものづくりができたらいいなと思っていろいろ奮闘してます。

トップ > JavaScript > 【JavaScript】クッキーの扱い方

【JavaScript】クッキーの扱い方

JavaScript JavaScript-基礎 規格 規格-RFC

クッキーの扱い方がわからなかったので調べてみました。

ファイルを込み込みクッキーを作成するページ

コード

<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ファイル読み込みでクッキー作成</title>
    <script>
        // クッキーを作成する関数
        function setCookie(name, value, days) {
            const date = new Date();
            date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000)); // 有効期限を設定
            const expires = "expires=" + date.toUTCString();
            document.cookie = `${name}=${value}; ${expires}; path=/`; // クッキーを設定
        }

        // ファイル読み込み後の処理
        function handleFile(event) {
            const file = event.target.files[0]; // 選択されたファイル
            if (!file) {
                alert("ファイルを選択してください。");
                return;
            }

            const reader = new FileReader();
            reader.onload = function(e) {
                const content = e.target.result.trim(); // ファイルの内容
                const lines = content.split("\n"); // 改行で分割

                // 各行をクッキーとして保存
                lines.forEach((line, index) => {
                    const [name, value] = line.split("="); // "名前=値" の形式を想定
                    if (name && value) {
                        setCookie(name.trim(), value.trim(), 7); // 7日間有効
                        console.log(`クッキー作成: ${name.trim()} = ${value.trim()}`);
                    } else {
                        console.warn(`無効なフォーマット: ${line}`);
                    }
                });

                alert("クッキーを作成しました。コンソールで確認してください。");
            };

            reader.onerror = function() {
                alert("ファイルの読み込みに失敗しました。");
            };

            reader.readAsText(file); // ファイルをテキストとして読み込む
        }
    </script>
</head>
<body>
    <h1>ファイルからクッキーを作成</h1>
    <p>「名前=値」の形式で記述されたファイルを選択してください（1行1クッキー）。</p>
    <input type="file" accept=".txt" onchange="handleFile(event)">
    <p>クッキーの作成結果はコンソールで確認できます。</p>
    <p><a href="view_cookies.html">クッキーを閲覧するページへ</a></p>
    <p><a href="delete_cookies.html">クッキーを削除するページへ</a></p>
    <p><a href="view_cookie.html">入力したクッキーを参照するページへ</a></p>
</body>
</html>

使い方

テキストファイルを準備します。以下の形式で記述します。
(ファイルのフォーマットは「名前=値」の形式を前提としています。)

user=テストユーザー
theme=dark
language=ja

webサーバを立ち上げます。

$ python -m http.server 8000

ファイルが読み込まれると、クッキーが作成され、コンソールに以下のようなログが出力されます。

クッキー作成: user = テストユーザー
クッキー作成: theme = dark
クッキー作成: language = ja

クッキーを閲覧するページ

コード

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>クッキーの値を表示</title>
    <script>
        // 特定のクッキーキーの値を取得する関数
        function getCookieValue(sKey) {
            const regex = new RegExp('(?:^|;\\s*)' + escape(sKey).replace(/[-.+*]/g, '\\$&') + '\\s*=([^;]*)');
            const match = regex.exec(document.cookie);
            return match ? decodeURIComponent(match[1]) : null;
        }

        // 画面にクッキー値を表示する
        function displayCookie() {
            const key = document.getElementById("cookieKey").value; // 入力されたキー
            const value = getCookieValue(key);

            const output = document.getElementById("output");
            if (value) {
                output.textContent = `キー: ${key}, 値: ${value}`;
            } else {
                output.textContent = `クッキー「${key}」は存在しません。`;
            }
        }
    </script>
</head>
<body>
    <h1>クッキーの値を表示</h1>
    <label for="cookieKey">クッキーキーを入力:</label>
    <!-- デフォルト値として "user" を設定 -->
    <input type="text" id="cookieKey" value="CCAANCH" placeholder="キー名を入力">
    <button onclick="displayCookie()">表示</button>

    <p id="output" style="margin-top: 10px; font-weight: bold;"></p>
    <ul id="cookieList"></ul>
    <p><a href="index.html">クッキーを作成するページへ</a></p>
    <p><a href="view_cookies.html">クッキーを閲覧するページへ</a></p>
    <p><a href="delete_cookies.html">クッキーを削除するページへ</a></p>
</body>
</html>

メモ

クッキーの取得

document.cookie を使用してブラウザに保存されているクッキーを取得します。
クッキーは「key=value」形式で取得され、複数のクッキーがある場合はセミコロンで区切られています。

クッキーを分解して表示

取得したクッキーをセミコロンで分割し、各要素をリスト (

    ) に追加します。

クッキーが存在しない場合

クッキーが空の場合は、「クッキーがありません」と表示します。

クッキーを削除するページ

コード

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>クッキーの削除</title>
    <script>
        // クッキーを削除する関数
        function deleteAllCookies() {
            const cookies = document.cookie.split(';');

            cookies.forEach(cookie => {
                const eqPos = cookie.indexOf('=');
                const name = eqPos > -1 ? cookie.substr(0, eqPos) : cookie;
                document.cookie = `${name}=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;`;
            });

            alert("すべてのクッキーを削除しました。");
            location.reload(); // ページをリロードして状態を更新
        }

        // クッキーのリストを表示する関数
        function displayCookies() {
            const decodedCookie = decodeURIComponent(document.cookie);
            const cookies = decodedCookie.split(';');
            const cookieList = document.getElementById('cookieList');

            if (cookies.length === 1 && cookies[0] === "") {
                cookieList.innerHTML = "<li>クッキーがありません</li>";
                return;
            }

            cookies.forEach(cookie => {
                const [name, value] = cookie.split('=');
                const listItem = document.createElement('li');
                listItem.textContent = `${name.trim()} = ${value.trim()}`;
                cookieList.appendChild(listItem);
            });
        }

        // ページ読み込み時にクッキーを表示
        window.onload = displayCookies;
    </script>
</head>
<body>
    <h1>クッキーの削除</h1>
    <ul id="cookieList"></ul>
    <button onclick="deleteAllCookies()">すべてのクッキーを削除</button>
    <p><a href="index.html">クッキーを作成するページへ</a></p>
    <p><a href="view_cookies.html">クッキーを閲覧するページへ</a></p>
</body>
</html>

メモ

クッキー削除

ページに保存されているすべてのクッキーを削除します。
削除後、ページをリロードしてクッキーのリストを更新します。

クッキー表示

削除前に現在のクッキーをリスト表示します。