JavaScriptでCookieを活用する基本

Webサイトでユーザーの情報を一時的に保存する際、Cookieは欠かせないツールの一つとなっています。この記事では、JavaScriptを使ったCookieの基本的な取り扱い方法をわかりやすく解説していきます。

Cookieとは何か？
Cookieの設定方法
1. 簡単にCookieを保存する
2. 有効期限やパスを指定する
Cookieの取得方法
1. 保存されているCookieを取り出す
2. 特定のCookieだけを取り出す
Cookieの削除方法
サンプル ToDoリストアプリ
まとめ

Cookieとは何か？

Cookieは、Webサイトがユーザーのブラウザに一時的に保存する小さなデータの断片のことを指します。文字列として保存され、主な用途としては以下のようなものが挙げられます。

ユーザーの識別やセッション管理
ユーザーの好みや設定の保存
トラッキングや広告配信

Cookieの設定方法

簡単にCookieを保存する

JavaScriptを使用して、ブラウザにCookieを設定することは非常に簡単です。以下のコードスニペットは、名前として”username”、値として”John”を持つCookieを設定します。

document.cookie = "username=John";

有効期限やパスを指定する

Cookieには有効期限やパス、ドメインなどのオプションを付加することができます。特にexpiresオプションは重要で、これを設定しない場合、ブラウザを閉じた時にCookieは自動的に削除されます。

document.cookie = "username=John; expires=Thu, 18 Dec 2023 12:00:00 UTC; path=/";

このようにして、特定の期日までCookieを保持することができます。

Cookieの取得方法

保存されているCookieを取り出す

保存されているCookieは、document.cookieを通して文字列として取得できます。

console.log(document.cookie);
// 出力例: "username=John; otherCookie=value"

特定のCookieだけを取り出す

全てのCookieを取得するのではなく、特定のキーを持つCookieの値だけを取得したい場合、簡単な関数を使用して取り出すことができます。

function getCookie(name) {
    let value = "; " + document.cookie;
    let parts = value.split("; " + name + "=");
    if (parts.length == 2) return parts.pop().split(";").shift();
}
console.log(getCookie("username")); // John

Cookieの削除方法

Cookieを削除する最も簡単な方法は、過去の日付をexpires属性に設定することです。

document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";

このコードを実行すると、usernameというキーを持つCookieはブラウザから削除されます。

サンプル ToDoリストアプリ

この例では、シンプルなToDoリストのアプリを考えます。ユーザーがタスクを追加すると、そのタスクはCookieに保存されます。ブラウザをリロードしても、前回のタスクが表示されるようにします。

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ToDo List with Cookie</title>
</head>
<body>
    <input type="text" id="newTask" placeholder="新しいタスクを入力...">
    <button onclick="addTask()">タスクを追加</button>
    <ul id="taskList"></ul>

    <script src="script.js"></script>
</body>
</html>

JavaScript (script.js)

// タスクを追加する関数
function addTask() {
    const taskInput = document.getElementById('newTask');
    const taskList = document.getElementById('taskList');

    const newTask = taskInput.value;
    if (newTask) {
        const listItem = document.createElement('li');
        listItem.textContent = newTask;
        taskList.appendChild(listItem);

        const currentTasks = getCookie('tasks');
        const updatedTasks = currentTasks ? currentTasks + ',' + newTask : newTask;
        setCookie('tasks', updatedTasks, 7);
    }

    taskInput.value = '';
}

// Cookieを設定する関数
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=/";
}

// Cookieを取得する関数
function getCookie(name) {
    const value = "; " + document.cookie;
    const parts = value.split("; " + name + "=");
    if (parts.length == 2) return parts.pop().split(";").shift();
    return "";
}

// 初期化処理
function initialize() {
    const storedTasks = getCookie('tasks');
    if (storedTasks) {
        const tasks = storedTasks.split(',');
        tasks.forEach(task => {
            const listItem = document.createElement('li');
            listItem.textContent = task;
            document.getElementById('taskList').appendChild(listItem);
        });
    }
}

// 初期化関数を呼び出す
initialize();

このサンプルでは、タスクが追加されるたびにtasksというCookieにカンマ区切りでタスクが追加されていきます。ページがロードされると、Cookieからタスクを読み取り、それを画面に表示します。

まとめ

JavaScriptでのCookieの操作は直感的でシンプルですが、その背後には多くの可能性が秘められています。適切に活用することで、ユーザーエクスペリエンスの向上やデータの一時的な保存といった、さまざまなタスクを効果的に実現することができます。安全なWeb開発のためにも、これらの基本的な操作をマスターしておくことをおすすめします。