【JavaScript】Cookie の取得・設定・削除の方法｜document.cookie・有効期限・SameSite・セキュリティまで解説

// 基本: key=value を設定
document.cookie = "username=Tanaka";

// 有効期限を設定（expires: UTC 形式の日時）
const date = new Date();
date.setDate(date.getDate() + 7); // 7 日後
document.cookie = `username=Tanaka; expires=${date.toUTCString()}; path=/`;

// max-age で秒数指定（expires より簡潔）
document.cookie = "username=Tanaka; max-age=604800; path=/"; // 7 日 = 604800 秒

// 複数の属性を同時に指定
document.cookie = "theme=dark; max-age=31536000; path=/; Secure; SameSite=Lax";

// document.cookie は全 Cookie を 1 つの文字列で返す
console.log(document.cookie);
// "username=Tanaka; theme=dark; lang=ja"

// 特定のキーの値を取得する関数
function getCookie(name) {
  const cookies = document.cookie.split("; ");
  for (const cookie of cookies) {
    const [key, ...valueParts] = cookie.split("=");
    if (key === name) {
      return decodeURIComponent(valueParts.join("="));
    }
  }
  return null; // 見つからない場合
}

console.log(getCookie("username")); // "Tanaka"
console.log(getCookie("missing"));  // null

// max-age=0 で即座に削除
document.cookie = "username=; max-age=0; path=/";

// expires を過去日時に設定しても削除できる
document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/";

// Cookie を設定する
function setCookie(name, value, days = 365, options = {}) {
  const maxAge = days * 24 * 60 * 60;
  const { path = "/", secure = false, sameSite = "Lax" } = options;
  let cookie = `${encodeURIComponent(name)}=${encodeURIComponent(value)}`;
  cookie += `; max-age=${maxAge}; path=${path}; SameSite=${sameSite}`;
  if (secure) cookie += "; Secure";
  document.cookie = cookie;
}

// Cookie を取得する
function getCookie(name) {
  const match = document.cookie.match(
    new RegExp("(?:^|; )" + name.replace(/[.*+?^${}()|[\]\\]/g, "\\$&") + "=([^;]*)")
  );
  return match ? decodeURIComponent(match[1]) : null;
}

// Cookie を削除する
function deleteCookie(name, path = "/") {
  document.cookie = `${encodeURIComponent(name)}=; max-age=0; path=${path}`;
}

// 使い方
setCookie("theme", "dark", 30);           // 30 日間保存
console.log(getCookie("theme"));           // "dark"
deleteCookie("theme");                     // 削除
console.log(getCookie("theme"));           // null

// テーマ設定を Cookie に保存
function toggleTheme() {
  const current = getCookie("theme") || "light";
  const next = current === "light" ? "dark" : "light";
  setCookie("theme", next, 365);
  document.documentElement.dataset.theme = next;
}

// ページ読み込み時にテーマを適用
const savedTheme = getCookie("theme") || "light";
document.documentElement.dataset.theme = savedTheme;

// 初回訪問かどうかを Cookie で判定
if (!getCookie("visited")) {
  // 初回訪問 → ウェルカムバナーを表示
  document.getElementById("welcome-banner").hidden = false;
  setCookie("visited", "true", 30); // 30 日間記憶
}

// Cookie 同意がまだなければバナーを表示
if (!getCookie("cookie_consent")) {
  document.getElementById("cookie-banner").hidden = false;
}

// 「同意する」ボタン
document.getElementById("accept-cookies").addEventListener("click", () => {
  setCookie("cookie_consent", "accepted", 365);
  document.getElementById("cookie-banner").hidden = true;
  // 同意後にアナリティクス等を読み込む
  loadAnalytics();
});

// 全 Cookie をオブジェクトとして取得
function getAllCookies() {
  if (!document.cookie) return {};
  return document.cookie.split("; ").reduce((acc, pair) => {
    const [key, ...val] = pair.split("=");
    acc[decodeURIComponent(key)] = decodeURIComponent(val.join("="));
    return acc;
  }, {});
}

console.table(getAllCookies());

// 全 Cookie を削除（HttpOnly 以外）
function deleteAllCookies() {
  document.cookie.split("; ").forEach(cookie => {
    const name = cookie.split("=")[0];
    document.cookie = `${name}=; max-age=0; path=/`;
  });
}