【JavaScript応用講座】localStorageでゲーム設定＆履歴を保存する

1. localStorageとは？

localStorage は、Webブラウザにキーと値のペアでデータを保存できる仕組みです。

  • データはブラウザを閉じても保持される（永続保存）
  • 保存できるデータは文字列（String）のみ
  • 同一ドメイン内であれば、どのページでもアクセス可能

✅ 他のストレージとの違い

ストレージ 永続性 容量 用途例
localStorage 永続（手動で消さない限り残る） 約5MB 言語設定、ユーザー名など
sessionStorage タブを閉じると消える 約5MB 一時的なセッション情報
cookies 有効期限あり＆リクエスト送信 約4KB ログイン情報やトラッキング
IndexedDB 構造化された大量データ保存 数百MB以上 ゲームセーブ、オフラインDBなど

✅ 例：最もシンプルな使い方

localStorage.setItem("username", "lain");
const name = localStorage.getItem("username");
console.log(name); // → "lain"

2. 使い方の基本

localStorage は「キーと値」でデータを保存・取得・削除できます。 値はすべて文字列として扱われるため、オブジェクトを保存する際には JSON.stringify() を使うのがポイントです。

📝 データを保存する：setItem()

localStorage.setItem("volume", "0.8");
localStorage.setItem("language", "ja");

🔍 データを取得する：getItem()

const lang = localStorage.getItem("language");
console.log(lang); // → "ja"

❌ データを削除する：removeItem()

localStorage.removeItem("volume");

🧹 全て削除：clear()（※注意）

localStorage.clear();

※ 他の設定まで全て消えてしまうため、基本は使いません。

3. オブジェクト保存の注意点

localStorage に保存できるのは 文字列（String） だけです。
そのため、オブジェクトや配列を保存する場合は JSON.stringify() で文字列に変換し、取り出すときは JSON.parse() で元に戻します。

🧱 例：設定オブジェクトを保存

const settings = {
  volume: 0.8,
  language: "ja",
  bgm: true
};

// 保存時
localStorage.setItem("settings", JSON.stringify(settings));

// 取得時
const saved = JSON.parse(localStorage.getItem("settings"));
console.log(saved.language); // → "ja"

⚠ よくあるミス

localStorage.setItem("settings", settings); // ← これはNG！
  • オブジェクトを直接保存すると、"[object Object]" という意味のない文字列になる

✅ 補足：nullチェックも忘れずに

const raw = localStorage.getItem("settings");
if (raw) {
  const config = JSON.parse(raw);
  // ...使う処理
}

4. 実用例①：音量設定や言語保存

ここでは、ゲーム内の「音量」や「言語設定」を localStorage に保存し、ページ読み込み時に自動反映する実用的な例を紹介します。

🔉 音量設定を保存・復元

// ユーザーがスライダーで音量を変更したとき
function saveVolume(volume) {
  localStorage.setItem("volume", volume);
}

// ページ読み込み時に反映
function loadVolume() {
  const v = localStorage.getItem("volume") || 0.5; // デフォルト0.5
  audio.volume = parseFloat(v);
}

🌐 言語設定を保存・復元

function saveLanguage(lang) {
  localStorage.setItem("lang", lang);
}

function loadLanguage() {
  const lang = localStorage.getItem("lang") || "ja";
  // JSONをfetchしてUIに反映する処理へ
  return lang;
}

💡 ポイント

  • 設定値をユーザーが触るたびに保存（即時反映型）
  • 読み込み時は || 演算子でデフォルト値を持たせておくと安全
  • 数値は parseFloat() や parseInt() で明示的に型変換

5. 実用例②：プレイ履歴やステージクリア情報

ゲームを進めるごとに「どのステージをクリアしたか」「何回プレイしたか」といった履歴情報を保存したい場合、localStorage を使えば簡単に管理できます。

🎮 ステージクリア履歴を保存

function saveStageClear(stageNum) {
  const raw = localStorage.getItem("clearHistory") || "[]";
  const history = JSON.parse(raw);

  if (!history.includes(stageNum)) {
    history.push(stageNum);
    localStorage.setItem("clearHistory", JSON.stringify(history));
  }
}

📖 履歴を読み込んでUIに反映

function loadClearHistory() {
  const raw = localStorage.getItem("clearHistory") || "[]";
  const history = JSON.parse(raw);

  history.forEach(stage => {
    document.querySelector(`#stage${stage}`)?.classList.add("cleared");
  });
}

💡 応用アイデア

  • Date.now() を記録して「初クリア日」を記録
  • スコアなどの数値情報を一緒に保存（オブジェクト型で管理）
const record = {
  stage: 1,
  score: 8400,
  date: Date.now()
};

localStorage.setItem("stage1", JSON.stringify(record));

6. よくあるミスと対策

localStorage を使っていてよく遭遇するエラーや、陥りがちな落とし穴をいくつか紹介します。

❗ オブジェクトを直接保存してしまう

localStorage.setItem("config", config); // → [object Object]

✅ 解決策：必ず JSON.stringify() を使う

localStorage.setItem("config", JSON.stringify(config));

❗ getItem の戻り値が null のまま使われる

const data = localStorage.getItem("score");
const parsed = JSON.parse(data); // ← null だとエラー！

✅ 解決策：nullチェックを入れる

const raw = localStorage.getItem("score");
if (raw) {
  const parsed = JSON.parse(raw);
  // ...処理
}

❗ 数値の扱いに注意

localStorage に保存されるのはすべて「文字列」なので、数値として使うには parseInt() や parseFloat() を使う必要があります。

const volume = parseFloat(localStorage.getItem("volume")) || 0.5;

❗ 保存容量の限界

  • localStorage の容量は通常 5MB 前後
  • 巨大なログや画像データを保存しようとすると失敗する可能性あり

✅ 解決策：履歴は必要最小限にし、圧縮・分割の工夫を

7. まとめ：localStorageで“記録”を持たせる

localStorage は、一見すると単純なストレージ機能ですが、ゲームやWebアプリの「状態を記録する」ための心強い味方です。

この記事では、以下のようなテーマを扱いました：

  • localStorageの基本操作（保存・取得・削除）
  • オブジェクトの保存と復元における注意点
  • ゲームでの設定や履歴の保存実装
  • 実際につまずきやすいミスとその回避方法

🎮 localStorageが活きるシーン

  • ユーザーの好み（音量・言語・BGM）を保存
  • ステージの進捗やクリア記録を残す
  • 一度設定すれば、次回以降は快適に遊べる

🚀 今後の展望

  • セーブデータをエクスポート/インポート可能に
  • プレイヤー別のスロット管理
  • クラウド連携によるマルチデバイス対応（応用：IndexedDB + API）

記録されることで、ゲームは“続き”を持ち始めます。 プレイヤーの足跡をデータに残すことは、物語を積み重ねるということ。

あなたの作品にも、温かみのある“記録”をぜひ取り入れてみてください。