IT基礎

localStorage

中級

読み方：ローカルストレージ｜英語：localStorage

ブラウザにデータを保存する仕組みで、Cookieと違いサーバーに送信されないよ。

やさしい説明

localStorageは、ブラウザにデータを永続的に保存する仕組みです。Cookieと違い、サーバーには送信されません。

ダークモードの設定、フォームの入力途中のデータ、ゲームのセーブデータなどを保存するのに使います。

キーと値のペアで保存し、文字列のみ保存可能です。オブジェクトはJSON.stringifyで文字列に変換してから保存します。

基本的な操作

// データを保存（キーと値のペア）
localStorage.setItem("theme", "dark");

// データを取得
const theme = localStorage.getItem("theme"); // "dark"

// データを削除
localStorage.removeItem("theme");

// 全データを削除
localStorage.clear();

// オブジェクトを保存するときはJSON変換が必要
const user = { name: "太郎", score: 100 };
localStorage.setItem("user", JSON.stringify(user));

// 取り出すときはパース
const saved = JSON.parse(localStorage.getItem("user"));
console.log(saved.name); // "太郎"

主な用途

学習進捗の保存 — レッスンをどこまで進めたかをブラウザに記録する（このサイトでも使用）
テーマ設定 — ダーク/ライトモードの選択を保存して、次回アクセス時にも反映する
フォームの入力途中保存 — 誤ってページを閉じても入力内容を復元できる
ゲームのセーブデータ — ブラウザゲームのスコアや進捗を記録する
カート情報 — ログイン不要のショッピングサイトで商品をカートに保持する

localStorage・sessionStorage・Cookieの比較

localStorage：削除するまで永続。サーバーへ送信されない。容量約5MB。同じオリジン内全タブで共有
sessionStorage：タブを閉じると削除。サーバーへ送信されない。容量約5MB。タブごとに独立
Cookie：有効期限を設定可能。リクエスト時にサーバーへ自動送信される。容量約4KB

ユーザーの設定や進捗など「クライアントだけで使うデータ」はlocalStorage、サーバーに送る必要があるセッション情報はCookieが適しています。

よくある疑問

Q: localStorageのデータはいつ消える？

A: ブラウザの「キャッシュ・サイトデータを削除」を実行するか、JavaScriptで localStorage.removeItem() または localStorage.clear() を呼ぶまで残ります。ブラウザを閉じても消えません。

Q: localStorageはセキュリティ的に安全？

A: 同じオリジン（ドメイン）のJavaScriptからしかアクセスできません。ただしXSS（クロスサイトスクリプティング）攻撃を受けると読み取られる可能性があります。パスワードや認証トークンなど機密情報の保存には向きません。

Q: 容量の上限はどのくらい？

A: ブラウザによって異なりますが、一般的に1オリジンあたり約5MBです。Cookieの4KBに比べて大幅に多く保存できます。