• クッキーとは
• JavaScriptでのクッキー設定方法
• クッキーの取得方法
• クッキーの削除方法
• Secure属性とHttpOnly属性
• クッキーの使用例

クッキーとは

クッキー（Cookie）とは、Webサイトがユーザーのブラウザに保存する小さなデータのことです。これにより、ログイン情報や設定情報などを保持できます。

JavaScriptでのクッキー設定方法

JavaScriptを使用すると、document.cookieを使ってクッキーを設定できます。

document.cookie = "username=hiroshi; expires=Fri, 31 Dec 2025 23:59:59 GMT; path=/";
    

このコードでは「username」というクッキーを設定し、有効期限を2025年12月31日に設定しています。

クッキーの取得方法

JavaScriptでクッキーを取得するには、document.cookieを使用します。

console.log(document.cookie);
    

このコードを実行すると、現在設定されているクッキーがすべて取得できます。

クッキーの削除方法

クッキーを削除するには、有効期限を過去の日付に設定します。

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

これにより、「username」クッキーが削除されます。

Secure属性とHttpOnly属性

Secure属性を設定すると、クッキーはHTTPS通信時のみ送信されます。

HttpOnly属性を設定すると、JavaScriptからのアクセスを防ぐことができます（サーバー側で設定）。

クッキーの使用例

以下のコードは、ユーザーの訪問回数を記録する簡単な例です。

function setVisitCount() {
    let visits = getCookie("visitCount") || 0;
    visits++;
    document.cookie = "visitCount=" + visits + "; path=/";
    document.getElementById("visitCount").innerText = "訪問回数: " + visits;
}

function getCookie(name) {
    let cookies = document.cookie.split("; ");
    for (let cookie of cookies) {
        let [key, value] = cookie.split("=");
        if (key === name) {
            return value;
        }
    }
    return null;
}

window.onload = setVisitCount;
    

このスクリプトをHTMLに追加すると、ユーザーの訪問回数が記録され、ページをリロードするたびに増加します。