【JavaScript】localStorageの使い方完全ガイド｜基本操作・JSON保存・エラー処理・実践パターンまで解説

localStorage.setItem('theme', 'dark');
localStorage.setItem('lang', 'ja');

// 数値は文字列に変換されて保存される
localStorage.setItem('count', 42); // '42' として保存

const theme = localStorage.getItem('theme');
console.log(theme); // 'dark'

const missing = localStorage.getItem('unknown');
console.log(missing); // null

// null チェックを忘れずに
const lang = localStorage.getItem('lang') ?? 'ja'; // デフォルト値を設定

localStorage.removeItem('theme');
console.log(localStorage.getItem('theme')); // null

localStorage.clear();
console.log(localStorage.length); // 0

console.log(localStorage.length); // 保存件数

for (let i = 0; i < localStorage.length; i++) {
  const key = localStorage.key(i);
  const val = localStorage.getItem(key);
  console.log(key, val);
}

// Object.entries と組み合わせる方法
const all = Object.fromEntries(
  Array.from({ length: localStorage.length }, (_, i) => [
    localStorage.key(i),
    localStorage.getItem(localStorage.key(i)),
  ])
);
console.log(all);

// 保存
const user = { name: '山田太郎', age: 30, role: 'admin' };
localStorage.setItem('user', JSON.stringify(user));

// 取得
const raw = localStorage.getItem('user');
const parsed = raw ? JSON.parse(raw) : null;
console.log(parsed?.name); // '山田太郎'

// 保存
const cart = [
  { id: 1, name: 'Tシャツ', qty: 2 },
  { id: 2, name: 'ジーンズ', qty: 1 },
];
localStorage.setItem('cart', JSON.stringify(cart));

// 取得
const savedCart = JSON.parse(localStorage.getItem('cart') ?? '[]');
console.log(savedCart.length); // 2

function safeSetItem(key, value) {
  try {
    localStorage.setItem(key, JSON.stringify(value));
    return true;
  } catch (e) {
    if (e.name === 'QuotaExceededError') {
      console.error('localStorageの容量が不足しています');
      // 古いキャッシュを削除するなど対処
    }
    return false;
  }
}

function isLocalStorageAvailable() {
  try {
    const test = '__test__';
    localStorage.setItem(test, test);
    localStorage.removeItem(test);
    return true;
  } catch {
    return false;
  }
}

if (isLocalStorageAvailable()) {
  localStorage.setItem('key', 'value');
} else {
  // メモリやCookieなどの代替手段を使う
  console.warn('localStorageが使用できません');
}

const storage = {
  get(key, fallback = null) {
    try {
      const raw = localStorage.getItem(key);
      return raw !== null ? JSON.parse(raw) : fallback;
    } catch {
      return fallback;
    }
  },

  set(key, value) {
    try {
      localStorage.setItem(key, JSON.stringify(value));
      return true;
    } catch (e) {
      console.error('保存に失敗しました:', e);
      return false;
    }
  },

  remove(key) {
    localStorage.removeItem(key);
  },

  clear() {
    localStorage.clear();
  },
};

// 使い方
storage.set('user', { name: '山田', age: 30 });
const user = storage.get('user', {});
console.log(user.name); // '山田'

// ページ読み込み時に適用
const savedTheme = localStorage.getItem('theme') ?? 'light';
document.documentElement.setAttribute('data-theme', savedTheme);

// 切り替えボタンのイベント
document.getElementById('theme-toggle').addEventListener('click', () => {
  const current = document.documentElement.getAttribute('data-theme');
  const next = current === 'dark' ? 'light' : 'dark';
  document.documentElement.setAttribute('data-theme', next);
  localStorage.setItem('theme', next);
});

const DRAFT_KEY = 'form_draft';
const form = document.getElementById('contact-form');

// 入力のたびに保存（debounce 推奨）
form.addEventListener('input', () => {
  const draft = {
    name: form.querySelector('[name="name"]').value,
    email: form.querySelector('[name="email"]').value,
    message: form.querySelector('[name="message"]').value,
  };
  localStorage.setItem(DRAFT_KEY, JSON.stringify(draft));
});

// ページ読み込み時に下書きを復元
window.addEventListener('DOMContentLoaded', () => {
  const draft = JSON.parse(localStorage.getItem(DRAFT_KEY) ?? 'null');
  if (!draft) return;
  form.querySelector('[name="name"]').value = draft.name ?? '';
  form.querySelector('[name="email"]').value = draft.email ?? '';
  form.querySelector('[name="message"]').value = draft.message ?? '';
});

// 送信後に下書きを削除
form.addEventListener('submit', () => {
  localStorage.removeItem(DRAFT_KEY);
});

const CART_KEY = 'cart';

function getCart() {
  return JSON.parse(localStorage.getItem(CART_KEY) ?? '[]');
}

function addToCart(item) {
  const cart = getCart();
  const existing = cart.find(i => i.id === item.id);
  if (existing) {
    existing.qty += 1;
  } else {
    cart.push({ ...item, qty: 1 });
  }
  localStorage.setItem(CART_KEY, JSON.stringify(cart));
}

function removeFromCart(id) {
  const cart = getCart().filter(i => i.id !== id);
  localStorage.setItem(CART_KEY, JSON.stringify(cart));
}

// 使い方
addToCart({ id: 1, name: 'Tシャツ', price: 3000 });
addToCart({ id: 1, name: 'Tシャツ', price: 3000 }); // qty: 2 になる
console.log(getCart());

window.addEventListener('storage', (event) => {
  if (event.key === 'theme') {
    // 別タブでテーマが変更されたら即座に適用
    document.documentElement.setAttribute('data-theme', event.newValue);
  }

  // event.key     : 変更されたキー
  // event.oldValue: 変更前の値
  // event.newValue: 変更後の値（削除時は null）
  // event.url     : 変更元ページのURL
  console.log(`${event.key}: ${event.oldValue} → ${event.newValue}`);
});

function getStorageUsage() {
  let total = 0;
  for (let i = 0; i < localStorage.length; i++) {
    const key = localStorage.key(i);
    total += key.length + (localStorage.getItem(key) || '').length;
  }
  // 2バイト/文字として概算（UTF-16）
  return Math.round(total * 2 / 1024) + 'KB';
}
console.log('使用量（目安）:', getStorageUsage());

const expiryStorage = {
  set(key, value, ttlMs) {
    const item = {
      value,
      expiresAt: ttlMs ? Date.now() + ttlMs : null,
    };
    try {
      localStorage.setItem(key, JSON.stringify(item));
    } catch (e) {
      console.error('保存に失敗:', e);
    }
  },

  get(key) {
    try {
      const raw = localStorage.getItem(key);
      if (!raw) return null;
      const item = JSON.parse(raw);
      if (item.expiresAt && Date.now() > item.expiresAt) {
        localStorage.removeItem(key); // 期限切れを自動削除
        return null;
      }
      return item.value;
    } catch {
      return null;
    }
  },
};

// 使い方: 1時間キャッシュ
expiryStorage.set('api_result', { data: [...] }, 60 * 60 * 1000);
const cached = expiryStorage.get('api_result');
if (cached) {
  console.log('キャッシュから取得:', cached);
} else {
  console.log('キャッシュ切れ。APIを再取得します');
}

// キー一覧をオブジェクト形式で表示
console.table(
  Object.fromEntries(
    Array.from({ length: localStorage.length }, (_, i) => [
      localStorage.key(i),
      localStorage.getItem(localStorage.key(i)),
    ])
  )
);