← PC・IT用語集へ戻る

LocalStorage

LocalStorage
web programming beginner
Webブラウザにデータを保存するための仕組み。ブラウザを閉じてもデータが消えずに残り続けるのが特徴。
LocalStorage (LocalStorage)

概要（サマリー）

LocalStorage（ローカルストレージ）は、ユーザーが使っている Web ブラウザ（Chrome や Safari など）に、データを保存しておくための仕組みである。

ブラウザを閉じたり、パソコンを再起動したり、ページを再読み込み（リロード）したりしても、保存したデータが消えずに残り続けるという特徴がある。

詳細解説

LocalStorageとは何か

LocalStorageは、Web Storageと呼ばれるブラウザ機能の一部である。

たとえば、Web アプリで「ダークモードとライトモードの切り替え設定」や「入力途中のフォーム内容」、「簡易的なゲームのハイスコア」などを、サーバー（データベース）に保存することなく、ユーザーの手元のブラウザだけに記憶させておきたい場合に非常によく使われる。

LocalStorageの特徴とメリット

LocalStorageには、以下のような特徴とメリットがある。

  • 有効期限なしでデータが残る: ユーザー自身がブラウザのキャッシュやサイトデータを削除するか、プログラムで意図的に削除しない限り、データは残り続ける。
  • 保存容量が比較的大きい: 古くからある Cookie より多くのデータを保存できることが多い。ただし、上限はブラウザや環境によって異なるため、大きなデータ保存には向かない。
  • サーバーとの通信が発生しない: データはローカル（ブラウザ）だけで処理されるため、サーバーに余計な通信負荷をかけず、高速に読み書きができる。

LocalStorageの使い方（JavaScriptでの基本操作）

LocalStorageは、JavaScript を使って非常に簡単に操作できる。データはすべて「キー（Key）と値（Value）」のペアで保存される。

JavaScriptによるLocalStorageの基本操作

// 1. データの保存 (キー: "theme", 値: "dark")
localStorage.setItem('theme', 'dark');

// 2. データの取得
const userTheme = localStorage.getItem('theme');
console.log(userTheme); // 出力: "dark"

// 3. 特定のキーのデータを削除
localStorage.removeItem('theme');

// 4. すべてのデータをクリア
localStorage.clear();

また、LocalStorageは「文字列」しか保存できないため、オブジェクト（連想配列）や配列を保存したい場合は、一度 JSON 形式の文字列に変換する必要がある。

オブジェクトをLocalStorageに保存する例

const user = { name: 'Hiroki', level: 5 };

// オブジェクトをJSON文字列に変換して保存
localStorage.setItem('userData', JSON.stringify(user));

// 取得時はJSON文字列をオブジェクトに戻す
const savedData = localStorage.getItem('userData');
const userObject = JSON.parse(savedData);
console.log(userObject.name); // 出力: "Hiroki"

CookieやSessionStorageとの違い

LocalStorageと似た仕組みに「Cookie（クッキー）」や「SessionStorage（セッションストレージ）」がある。それぞれの違いは以下の通りである。

項目 LocalStorage SessionStorage Cookie
データの寿命 有効期限なし（削除されるまで） タブやブラウザを閉じるまで 設定した有効期限まで
容量 数MB程度が目安 数MB程度が目安 極めて小さい（約 4 KB）
サーバー送信 送信されない 送信されない リクエストのたびに自動送信される

セキュリティと注意点

LocalStorageはJavaScriptから簡単に読み書きできるため、悪意のあるスクリプトを実行される攻撃（XSS攻撃など）に非常に弱い。

そのため、クレジットカード情報、ログインパスワード、セッションID（認証キー）などの機密性の高い個人情報や重要データをLocalStorageに保存することは避けるべきである。認証情報は、サーバー側の設計や HttpOnly、Secure、SameSite などの属性を持つCookieの利用も含めて、安全な管理方法を検討する必要がある。

AIコーディングとの関係

AIコーディングにおいて、LocalStorageを使ったデータ保存の実装は初心者向けの非常に良いテーマである。

AIに指示を出す際は、以下のように具体的に指定すると動くコードを書いてもらえる。

  • 「JavaScriptで、LocalStorageを使用してダークモードの切り替え状態を保存・復元するコードを書いてください」
  • 「ToDoリストの配列データを、LocalStorageを使ってブラウザを閉じても残るようにするJavaScriptを書いてください。JSONの変換処理も含めてください」

AIは、データの保存だけでなく「ページが読み込まれた時にLocalStorageから値を取得して初期状態に反映する」という一連の流れを含むコード作成の助けになる。ただし、JSONの変換失敗、容量上限、XSS対策、個人情報を保存しない設計は、人間が必ず確認する必要がある。

よくある勘違い

LocalStorageはデータベースの代わりになる？

一時的な設定保存には使えるが、本格的なデータベースの代わりにはならない。LocalStorageは検索や並び替えの機能を持たず、容量上限（5MB）があり、さらにブラウザやデバイスが異なればデータは共有されない（スマホで保存したデータをPCで見ることはできない）ためである。

LocalStorageに入れたデータは絶対に消えない？

「半永久的」ではあるが「絶対」ではない。ユーザーがブラウザの「履歴やクッキーの削除」を行う際に「サイトデータ」にチェックを入れると消去される。また、スマホのストレージ容量が極端に逼迫した際、OSによって削除されるケースもある。

LocalStorageならログイン情報を保存してもよい？

保存してはいけない。LocalStorageはJavaScriptから読めるため、XSSなどで悪意あるスクリプトが動くと中身を盗まれる危険がある。ログイン状態や認証情報は、アプリ全体のセキュリティ設計として別の方法を検討する必要がある。

LocalStorageの容量はどのブラウザでも必ず5MB？

必ず5MBとは限らない。よく目安として数MB程度と説明されるが、実際の上限や挙動はブラウザ、端末、プライベートブラウズ、保存済みデータ量などによって変わる。容量が大きいデータや重要なデータの保存先としては向いていない。

まとめ

  • LocalStorageは、ブラウザに有効期限なしでデータを保存できる仕組みである
  • キーと値のペアで保存し、JavaScriptで数行で操作できる
  • Cookieに比べて容量が大きいことが多く、リクエストごとに自動送信されない
  • セキュリティ面のリスクがあるため、パスワードや個人情報などの重要データは保存してはならない

情報ソース

より詳しくAIに聞いてみよう

  • JavaScriptでLocalStorageにデータが保存されているかどうかを確認し、存在しない場合に初期値をセットする方法を教えてください。
  • LocalStorageとSessionStorageの使い分けの基準を、具体的なアプリの機能を例にして教えてください。
  • LocalStorageの容量制限（約5MB）を超えて保存しようとしたとき、どのようなエラーが発生し、プログラムでどう対処すべきですか？
  • AIを使って、LocalStorageに保存したお気に入りリストを一覧画面に表示する簡易的なECサイトのデモコードを作成してください。
  • セキュリティの観点から、LocalStorageへのログイン情報の保存がなぜ危険なのか（XSS攻撃の仕組みを含めて）初心者向けに説明してください。