HTMLでクッキーを設定する方法
クッキーとは
クッキー（Cookie）とは、Webサイトがユーザーのブラウザに保存する小さなデータのことです。これにより、ログイン情報や設定情報などを保持できます。
JavaScriptでのクッキー設定方法
JavaScriptを使用すると、document.cookieを使ってクッキーを設定できます。
document.cookie = "username=hayato; 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に追加すると、ユーザーの訪問回数が記録され、ページをリロードするたびに増加します。