← カテゴリ一覧に戻る

Cookieの読み書き

document.cookie CookieStore API

Cookieはサーバーとブラウザ間で自動的に送受信される小さなデータです。有効期限の設定や属性による制御が重要です。

デモ：Cookie の読み書き

現在の document.cookie：

（なし）

コード例（手動パース）

js
// ⚠️ document.cookie は古いAPI（文字列操作が必要）

// Cookieの設定
document.cookie = 'name=Alice; expires=Fri, 31 Dec 2024 23:59:59 GMT; path=/';
// expires なし → セッションCookie（タブを閉じると消える）
// path=/ → サイト全体で有効

// セキュリティ属性
document.cookie = [
  'token=abc123',
  'expires=' + new Date(Date.now() + 7*86400000).toUTCString(),
  'path=/',
  'SameSite=Lax',  // CSRF対策（Strict / Lax / None）
  // 'HttpOnly',   // JS からは設定できない（サーバーのみ）
  // 'Secure',     // HTTPS のみ（本番環境用）
].join('; ');

// Cookieの取得（パース）
function getCookie(name) {
  return document.cookie
    .split('; ')
    .find(c => c.startsWith(name + '='))
    ?.split('=')[1] ?? null;
}
getCookie('name'); // "Alice"

// Cookieの削除（過去の日付を設定）
document.cookie = 'name=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;';

// 全Cookieをオブジェクトに変換
const cookies = Object.fromEntries(
  document.cookie.split('; ').map(c => c.split('='))
);

重要なCookie属性

属性効果
HttpOnlyJSからアクセス不可（XSS対策）。サーバーのみ設定可能
SecureHTTPS通信時のみ送信
SameSite=Strict同一サイトからのリクエストのみ（CSRF対策最強）
SameSite=Lax通常のナビゲーションのみ（デフォルト・推奨）
SameSite=Noneクロスサイト送信可（Secure必須）

NEWCookieStore API（Promise ベースの新しいCookie API）

従来の document.cookie は文字列操作が必要で扱いにくいですが、 CookieStore API はPromiseベースで直感的に操作できます（Chrome 87+）。

js
// ✅ CookieStore API（Chrome 87+）
// 取得
const cookie = await cookieStore.get('name');
console.log(cookie?.value); // "Alice"

// 全Cookie取得
const all = await cookieStore.getAll();

// 設定
await cookieStore.set({
  name: 'token',
  value: 'abc123',
  expires: Date.now() + 7 * 24 * 60 * 60 * 1000,
  sameSite: 'lax',
  secure: true,
});

// 削除
await cookieStore.delete('name');

// 変更の監視
cookieStore.addEventListener('change', (e) => {
  console.log('変更:', e.changed, e.deleted);
});

🤖 AIプロンプトテンプレート

以下の要件を満たすTypeScript + Reactコンポーネントを作成してください。

- document.cookieを使ったCookieの読み書き削除のサンプルを示す
- CookieのSameSite・Secure・HttpOnly属性の設定例を含める
- 有効期限（expires/max-age）を指定したCookie設定のサンプルを含める
- 全Cookieを一覧表示・個別削除するUIのサンプルを示す
- Cookie Storage APIを使ったモダンなCookie操作の例を含める
- コメントは日本語で記述する

⚠️ このプロンプトはあくまでたたき台です。AIの回答はモデルやバージョン、会話の文脈によって毎回異なります。意図通りに動かない場合は、条件を追記・修正してお使いください。

このサイトについて使用ライブラリ一覧☕ Buy Me a Coffee
© UI Memo