JavaScript 逆引き集 | Cookie セット（簡易）

JavaScript JavaScript
スポンサーリンク

Cookie を簡単にセット・取得 — document.cookie = 'k=v; path=/; max-age=3600'

Cookie はブラウザに短い文字列を保存し、同一オリジンへの次回以降のアクセス時に自動送信されます。document.cookie に「NAME=VALUE; 属性...」という文字列を代入して設定し、読み出しは document.cookie を参照して自前でパースします。

基本の使い方（セット／取得／削除）

<script>
  // 1) セット（1時間だけ有効）
  document.cookie = "theme=dark; path=/; max-age=3600";

  // 2) 取得（全Cookieが1本の文字列で返る）
  console.log(document.cookie); // "theme=dark; session=abc123; ..." のような形式  [Let'sプログラミング](https://www.javadrive.jp/javascript/webpage/index17.html)

  // 3) 削除（有効期限を過去にする or max-age=0）
  document.cookie = "theme=; path=/; max-age=0";
  // もしくは expires を過去に
  document.cookie = "theme=; path=/; expires=Thu, 01 Jan 1970 00:00:00 GMT";
</script>
HTML
  • 形式: NAME=VALUE を基本に、; path=/ や ; max-age=秒 などの属性を後ろに繋げます。
  • 注意: 1回の代入で「1つの Cookie」しか設定できません。複数は同じ要領で複数回代入します。

よく使うテンプレート集

文字列を安全に保存（エンコード推奨）

function setCookie(name, value, { maxAge, path = "/", secure, sameSite, domain, expires } = {}) {
  const parts = [];
  parts.push(`${name}=${encodeURIComponent(value)}`); // 値をURLエンコード
  if (path) parts.push(`path=${path}`);
  if (domain) parts.push(`domain=${domain}`);
  if (typeof maxAge === "number") parts.push(`max-age=${maxAge}`); // 秒
  if (expires instanceof Date) parts.push(`expires=${expires.toUTCString()}`); // RFC形式
  if (sameSite) parts.push(`samesite=${sameSite}`); // Lax/Strict/None
  if (secure) parts.push(`secure`); // HTTPSのみ送信
  document.cookie = parts.join("; ");
}
JavaScript

Cookie をオブジェクトで取得（1件だけ）

function getCookie(name) {
  const cookies = document.cookie.split("; "); // "name=value" の配列  [Let'sプログラミング](https://www.javadrive.jp/javascript/webpage/index17.html)
  for (const c of cookies) {
    const [k, v] = c.split("=");
    if (k === name) return decodeURIComponent(v || "");
  }
  return null;
}
JavaScript

期限付き（7日）でセットする簡易版

const days = 7;
const expires = new Date(Date.now() + days * 24 * 60 * 60 * 1000);
document.cookie = `session=abc123; path=/; expires=${expires.toUTCString()}`;
JavaScript

よく使う属性の意味（要点）

  • path=/: どのパスへ送るか。/ にすればサイト全体へ送信されます。
  • domain=example.com: サブドメインも含めた送信範囲を広げたいときに設定（通常は不要）。
  • max-age=秒 / expires=日時: 有効期限。max-age は秒指定、expires はUTC文字列。どちらか一方で十分です。
  • secure: HTTPS 通信のときだけ送信されます。
  • samesite=Lax|Strict|None: CSRF対策の属性。外部サイトからの遷移で送るかどうかの制御。None の場合は secure が事実上必須です。

Cookie は「ブラウザに保存された小さなテキスト」で、サーバーへのリクエストに自動添付されます。document.cookie は「現在のページに紐づくすべての Cookie を 'name=value; name2=value2; ...' の形で返す」ため、用途に応じて分割して使います。

実務でのコツ

  • 値はエンコード: encodeURIComponent を使うと、スペースやセミコロンなどで壊れません。
  • セキュリティ属性: 認証情報のような重要 Cookie は Secure と SameSite を適切に設定（JSから扱うべきでない機微情報は HttpOnly をサーバー側で付与）。
  • スコープ設計: 「サイト全体で使いたい」なら path=/。特定パスだけならそのパスに限定し、意図しない送信を避けます。
  • 容量と数の制約: Cookie は小さく（1件あたり数KB程度）、数もブラウザ上限があるため大量保存に不向きです。
  • 複数設定は1件ずつ: まとめて渡すのではなく、1 Cookie ごとに document.cookie = ... を繰り返します。

ありがちなハマりポイントと対策

  • 目的の Cookie が取れない:
    • 対策: path/domain が一致していないと見えない・送られない。取得時は document.cookie を分割してキー名で探す。
  • 削除できない:
    • 対策: セット時と同じ path/domain を指定して、max-age=0 または expires を過去にする。
  • HTTPS で送られない:
    • 対策: samesite=None を使っているなら secure も付ける。開発環境のプロトコルを確認。
  • 値が壊れる・途中で切れる:
    • 対策: encodeURIComponent(value)／取得時は decodeURIComponent。

練習問題（同意バナーの簡易実装）

<div id="cookieBanner" class="banner">
  このサイトはCookieを利用します。<button id="agree">同意する</button>
</div>

<style>
  .banner { position: fixed; bottom: 0; left: 0; right: 0; background: #222; color: #fff; padding: 12px; }
  .hidden { display: none; }
</style>

<script>
  const KEY = "app:consent";
  const banner = document.getElementById("cookieBanner");

  // 1) 既に同意済みなら非表示
  if (getCookie(KEY) === "1") banner.classList.add("hidden");

  // 2) 同意でCookieを1年保存して非表示
  document.getElementById("agree").addEventListener("click", () => {
    setCookie(KEY, "1", { path: "/", maxAge: 365 * 24 * 60 * 60, sameSite: "Lax" });
    banner.classList.add("hidden");
  });

  function setCookie(name, value, opts = {}) {
    const parts = [`${name}=${encodeURIComponent(value)}`];
    if (opts.path) parts.push(`path=${opts.path}`);
    if (opts.maxAge != null) parts.push(`max-age=${opts.maxAge}`);
    if (opts.expires instanceof Date) parts.push(`expires=${opts.expires.toUTCString()}`);
    if (opts.domain) parts.push(`domain=${opts.domain}`);
    if (opts.sameSite) parts.push(`samesite=${opts.sameSite}`);
    if (opts.secure) parts.push(`secure`);
    document.cookie = parts.join("; ");
  }

  function getCookie(name) {
    const list = document.cookie.split("; ");
    for (const item of list) {
      const [k, v] = item.split("=");
      if (k === name) return decodeURIComponent(v || "");
    }
    return null;
  }
</script>
HTML

直感的な指針

  • 1 Cookie = 1回の document.cookie 代入。NAME=VALUE; 属性... を組み立てる。
  • 取得は document.cookie を分割してキーで探す。値はエンコード／デコード。
  • path/domain/期限/secure/samesite を目的に合わせて最小限、正しく設定する。
スポンサーリンク
タイトルとURLをコピーしました