JavaScript | Web API：ストレージ系 API － LocalStorage の基本

JavaScript JavaScript
スポンサーリンク

LocalStorage は「ブラウザにメモ帳を置く」イメージ

まずざっくりイメージから。
LocalStorage は、「ブラウザの中にある、キーと値を保存できる小さなメモ帳」 です。

ページを閉じても、ブラウザを再起動しても、
同じサイトに戻ってくれば、そのメモは残っています。

ポイントはここです。

  • サーバーではなく「ユーザーのブラウザ側」に保存される
  • 同じドメイン（同じサイト）からだけ読める
  • 文字列（string）として保存される

この「全部文字列」というところが、最初のつまずきポイントなので、あとで深掘りします。

LocalStorage の超基本操作

値を保存する setItem

一番基本の形はこれです。

localStorage.setItem("キー", "値");
JavaScript

例えば、ユーザー名を保存したいとします。

localStorage.setItem("username", "taro");
JavaScript

これで、ブラウザの中に

  • キー: "username"
  • 値: "taro"

というペアが保存されます。

値を取り出す getItem

保存した値を取り出すには、getItem を使います。

const name = localStorage.getItem("username");
console.log(name); // "taro"
JavaScript

もし、そのキーが存在しない場合は null が返ってきます。

const age = localStorage.getItem("age");
console.log(age); // null
JavaScript

値を消す removeItem と全部消す clear

特定のキーだけ消したいときは removeItem。

localStorage.removeItem("username");
JavaScript

LocalStorage に保存されているものを全部消したいときは clear。

localStorage.clear();
JavaScript

重要ポイント：LocalStorage は「全部文字列」で保存される

数字を保存しても文字列になる

ここが一番大事なポイントです。
LocalStorage は 「なんでも文字列として保存する」 という仕様です。

例えば、こう書いたとします。

localStorage.setItem("count", 10);
JavaScript

一見、数字 10 を保存しているように見えますが、
実際には "10" という文字列として保存されます。

取り出してみると分かります。

const count = localStorage.getItem("count");
console.log(count);        // "10"
console.log(typeof count); // "string"
JavaScript

もしこれをそのまま足し算すると、こうなります。

const count = localStorage.getItem("count"); // "10"
const next = count + 1;
console.log(next); // "101"（文字列の結合になってしまう）
JavaScript

ここでハマる人がめちゃくちゃ多いです。

数字として使いたいなら、自分で数値に変換する必要があります。

const count = Number(localStorage.getItem("count") ?? 0);
const next = count + 1;
console.log(next); // 11
JavaScript

オブジェクトや配列は JSON にして保存する

オブジェクトや配列も、そのままでは保存できません。

const user = { name: "taro", age: 20 };

// これはダメ（[object Object] という文字列になる）
localStorage.setItem("user", user);
JavaScript

こうすると、実際には "[object Object]" という意味不明な文字列が保存されます。

正しいやり方は、JSON に変換してから保存する ことです。

const user = { name: "taro", age: 20 };

// 保存するとき
localStorage.setItem("user", JSON.stringify(user));
JavaScript

取り出すときは、JSON をパースして元に戻す。

const userJson = localStorage.getItem("user");
if (userJson !== null) {
  const user = JSON.parse(userJson);
  console.log(user.name); // "taro"
  console.log(user.age);  // 20
}
JavaScript

ここが超重要です。

  • LocalStorage は「文字列しか保存できない」
  • オブジェクトや配列は JSON.stringify / JSON.parse がセット

このペアを体に染み込ませておくと、一気に扱いやすくなります。

具体例：簡単な「ダークモード設定」を保存してみる

仕様を決める

例として、「ダークモードの ON/OFF を LocalStorage に保存する」コードを書いてみます。

やりたいことはこうです。

  • ユーザーが「ダークモード切り替えボタン」を押したら状態を保存する
  • ページを開いたときに、前回の設定を読み込んで反映する

保存したいのは、"light" か "dark" のどちらかです。

状態を保存する関数

まず、「テーマを保存する関数」を作ります。

function saveTheme(theme) {
  localStorage.setItem("theme", theme);
}
JavaScript

ここでは、theme は "light" か "dark" の文字列だと決めておきます。

状態を読み込む関数

次に、「保存されているテーマを読み込む関数」。

function loadTheme() {
  const theme = localStorage.getItem("theme");
  if (theme === "light" || theme === "dark") {
    return theme;
  }
  // 何も保存されていない or 不正な値ならデフォルトを返す
  return "light";
}
JavaScript

ここで大事なのは、
「LocalStorage から返ってくる値は null の可能性がある」
ということをちゃんと考えている点です。

テーマを画面に反映する関数

CSS クラスでテーマを切り替えるとします。

function applyTheme(theme) {
  document.documentElement.dataset.theme = theme;
}
JavaScript

CSS 側は例えばこんな感じ。

:root[data-theme="light"] {
  --bg-color: #ffffff;
  --text-color: #222222;
}

:root[data-theme="dark"] {
  --bg-color: #222222;
  --text-color: #ffffff;
}

body {
  background-color: var(--bg-color);
  color: var(--text-color);
}

ページ読み込み時に前回の設定を反映

const currentTheme = loadTheme();
applyTheme(currentTheme);
JavaScript

ボタンで切り替え

const toggleButton = document.querySelector("#toggle-theme");

toggleButton.addEventListener("click", () => {
  const current = loadTheme();
  const next = current === "light" ? "dark" : "light";
  saveTheme(next);
  applyTheme(next);
});
JavaScript

これで、

  • 一度ダークモードにすると
  • ページをリロードしても
  • ブラウザを閉じて開き直しても

設定が維持されます。

ここで意識してほしいのは、
LocalStorage を「ただの保存場所」としてではなく、
「アプリの設定を覚えておくための小さなストレージ」として設計している
という感覚です。

LocalStorage の制限と注意点

容量はそんなに大きくない

ブラウザにもよりますが、
LocalStorage の容量はだいたい 5MB 前後です。

テキストだけならそこそこ入りますが、
画像や巨大なデータを突っ込む場所ではありません。

「ちょっとした設定」「軽いキャッシュ」くらいに使うのが現実的です。

同じドメインで共有される

LocalStorage は「ドメインごと」に分かれています。

https://example.com で保存したデータは、
同じ https://example.com からだけ読めます。

https://sub.example.com や https://another.com からは見えません。

セキュリティ的に「秘密情報」は入れない

LocalStorage は、JavaScript から簡単に読めます。
つまり、XSS（スクリプトを埋め込まれる攻撃）が起きると、
LocalStorage の中身も盗まれる可能性があります。

だから、
パスワードや本物のトークンなど「絶対に漏れてはいけないもの」は入れない
というのが基本ルールです。

「ちょっとした UI 設定」「一時的なキャッシュ」くらいに留めておくのが安全です。

LocalStorage と「今後の発展」のイメージ

LocalStorage は「最初の一歩」としてちょうどいい

LocalStorage はシンプルで、
初心者が「ブラウザにデータを保存する感覚」をつかむのにちょうどいい API です。

ただし、できることはそこまで多くありません。

  • 文字列しか保存できない
  • 容量が小さい
  • 非同期ではなく同期（大量に読むと UI が固まる可能性）

本格的なデータ保存が必要になってくると、
IndexedDB や localForage など、
より強力な仕組みを使うことになります。

でも、その前に
「LocalStorage でキーと値を保存する感覚」
「JSON でオブジェクトを保存する感覚」
を身につけておくと、次のステップにスムーズに進めます。

まとめとして、頭に置いておいてほしいこと

最後に、あなたの頭の中に残しておいてほしいポイントを整理します。

LocalStorage は「ブラウザにある小さなメモ帳」
保存できるのは「文字列だけ」
オブジェクトや配列は JSON.stringify / JSON.parse が必須
getItem は存在しないキーのとき null を返すので、そこをちゃんと考える
設定や軽いデータの保存には便利だが、秘密情報や巨大データには向かない

おすすめの練習は、
自分の小さな Web ページを作って、

  • 最後に入力したフォームの内容を LocalStorage に保存しておく
  • チェックボックスの ON/OFF を保存しておく
  • シンプルな TODO リストを LocalStorage に保存する

などをやってみることです。

「ページをリロードしても、前の状態が残っている」
という体験を、自分のコードで作れたとき、
LocalStorage が一気に“自分の道具”になります。

スポンサーリンク
タイトルとURLをコピーしました