localStorage — ブラウザにデータを保存する

このトピックを終えると

localStorageの使い方、限界、そしてどのようなデータを保存すべきかを判断できるようになります。

リロードすると消えるデータ

JavaScript変数は、ページをリロードすると消えます。ユーザーがダークモードを選択したのに、リロードするたびにライトモードに戻ってしまうのは不便です。

localStorageは、ブラウザにデータを永続的に保存します。リロードしても、ブラウザを閉じても残ります。

基本的な使い方

// 保存
localStorage.setItem("theme", "dark");

// 読み取り
const theme = localStorage.getItem("theme"); // "dark"

// 削除
localStorage.removeItem("theme");

// 全て削除
localStorage.clear();

キーと値のペアで保存します。値は必ず文字列です。

オブジェクトはJSONとして

const user = { name: "Alice", age: 25 };

// 保存 — オブジェクトを文字列に
localStorage.setItem("user", JSON.stringify(user));

// 読み取り — 文字列をオブジェクトに
const saved = JSON.parse(localStorage.getItem("user"));
console.log(saved.name); // "Alice"

localStorageは文字列のみを保存するため、オブジェクトを保存するにはJSON.stringifyで変換する必要があります。読み出す際には、JSON.parseで復元します。

直接オブジェクトを保存すると：

localStorage.setItem("user", { name: "Alice" });
localStorage.getItem("user"); // "[object Object]" — 役に立たない文字列

localStorage vs sessionStorage

// localStorage — 永続保存
localStorage.setItem("key", "value");

// sessionStorage — タブを閉じると削除
sessionStorage.setItem("key", "value");

sessionStorageは、ブラウザのタブを閉じると消えます。同じサイトの別のタブとは共有されません。一時的なデータ（入力中のフォームのバックアップなど）に適しています。

注意点

容量制限: ドメインあたり約5MB。小さな設定値には十分ですが、大量のデータは保存しないでください。

文字列のみ: 数字、ブール値も文字列に変換されます。

localStorage.setItem("count", 42);
const count = localStorage.getItem("count"); // "42" (文字列)
const num = Number(count); // 42 (数値に変換)

セキュリティ上の機密データを保存しない: localStorageはJavaScriptで誰でも読み取ることができます。パスワード、トークン、個人情報を保存すると、XSS攻撃で盗まれる可能性があります。

同期API: localStorageは同期的に動作します。大きなデータを読み書きすると、メインスレッドをブロックする可能性があります。

実務での活用

適切なデータ：テーマ設定、言語設定、最近の検索語、カート（未ログインのユーザー）、オンボーディングの完了状態。

不適切なデータ：認証トークン、パスワード、ユーザーの個人情報、大量のデータ。

重要なポイント

localStorageは、ブラウザにキーと値の文字列を永続的に保存します。 オブジェクトはJSON.stringify/JSON.parseで変換して扱います。 セキュリティ上の機密データは絶対に保存しないでください。