IndexedDBとLocalStorage、SessionStorageの比較

モダンなWebアプリケーションを構築する際、適切なクライアントサイドストレージAPIを選択することは、アプリのパフォーマンスとユーザー体験に大きな影響を与えます。LocalStorageとSessionStorageはシンプルなデータには適していますが、IndexedDBはオフラインWebアプリや複雑なデータ管理に不可欠な機能を提供します。これらのJavaScriptブラウザストレージオプションを比較し、それぞれをいつ使用すべきかを見ていきましょう。

3つのクライアントサイドストレージAPIの理解

LocalStorage:シンプルで永続的

LocalStorageは、明示的にクリアされるまで無期限に保持されるキーバリューペアを文字列として保存します。オリジンごとに通常5-10MBの容量があり、ユーザー設定、テーマ設定、小規模な設定データに最適です。

localStorage.setItem('userTheme', 'dark');
const theme = localStorage.getItem('userTheme'); // Returns 'dark'

LocalStorageの同期的な性質は、すべての操作がメインスレッドをブロックすることを意味します。わずか1MBのデータの読み書きでも、平均的なデバイスでは100-200ミリ秒UIがフリーズする可能性があります。

SessionStorage:一時的なタブストレージ

SessionStorageはLocalStorageと同じように動作しますが、重要な違いが1つあります:データはタブを閉じると期限切れになります。同じ5-10MBの制限と同期APIを維持しており、一時的なフォームデータや単一セッションの状態管理に適しています。

sessionStorage.setItem('formDraft', JSON.stringify(formData));

データはタブごとに分離されています—同じページを新しいタブで開くと、別のSessionStorageインスタンスが作成されます。

IndexedDB vs LocalStorageとSessionStorage:主な違い

ストレージ容量とデータ型

LocalStorageとSessionStorageが文字列と5-10MBのスペースに制限されているのに対し、IndexedDBは実質的に無制限のストレージ(多くの場合、利用可能なディスクスペースの50%)を扱い、JavaScriptオブジェクトを直接保存できます:

// IndexedDB stores complex objects without serialization
const userData = {
  id: 1,
  profile: { name: 'Alice', avatar: blobData },
  settings: { theme: 'dark', notifications: true },
  lastSync: new Date()
};
// Note: Map objects cannot be directly stored in IndexedDB

パフォーマンス特性

最も重要な違いはパフォーマンスにあります。LocalStorageとSessionStorageは、JavaScript実行をブロックする同期操作を使用します:

• LocalStorage/SessionStorage: 同期的、メインスレッドをブロック
• IndexedDB: 非同期、ノンブロッキング操作

大規模なデータセットの場合、LocalStorageはその同期的な性質のためUIを顕著にブロックする可能性がありますが、IndexedDBの操作は非同期で実行され、UIの応答性を維持します。

データ整合性とトランザクション

IndexedDBはデータの一貫性を保証するトランザクション操作を提供します。トランザクションの一部が失敗すると、すべての変更が自動的にロールバックされます—これはデータ整合性を維持するオフラインWebアプリにとって重要です。

IndexedDBがLocalStorageを上回る場合

オフラインファーストアプリケーション

オフラインで動作するメモ帳アプリを考えてみましょう。IndexedDBを使用すると、添付ファイル付きの数千のドキュメントを保存し、インデックスを使用して効率的に検索し、再接続時に変更を同期できます—LocalStorageの制限では不可能です。

大規模データセット管理

ECサイトは、IndexedDBに製品カタログ全体をキャッシュできます。Linearのようなアプリケーションはこのアプローチを使用してプロジェクトデータをローカルに保存し、サーバーリクエストを行う前にキャッシュの有効性をチェックすることで、読み込み時間を大幅に短縮しています。

複雑なデータ構造

IndexedDBはBlob、File、型付き配列をネイティブに処理します。写真編集アプリは、base64エンコーディング(LocalStorageではサイズが33%増加)なしで画像を直接保存できます。

実用的な実装の比較

以下は、ユーザーデータを保存する実際の例です:

// LocalStorage - requires serialization, blocks UI
const saveToLocalStorage = (data) => {
  localStorage.setItem('userData', JSON.stringify(data)); // Blocks thread
};

// IndexedDB - handles objects, non-blocking (using idb library)
const saveToIndexedDB = async (data) => {
  const db = await openDB('MyApp', 1, {
    upgrade(db) {
      db.createObjectStore('users', { keyPath: 'id' });
    }
  });
  const tx = db.transaction('users', 'readwrite');
  await tx.objectStore('users').put(data); // Non-blocking
};

ブラウザ互換性と制限事項

2025年現在、3つのAPIすべてが普遍的なブラウザサポートを享受しています。ただし、プライベートブラウジングでの動作は異なります:

• Safari: プライベートモードでは通常のブラウジングと比較して低いクォータを適用
• Firefox: プライベートセッション終了時にすべてのストレージをクリア
• Chrome: シークレットモードで標準クォータを維持

ストレージ削除ポリシーも異なります。ディスクスペースが不足すると、ブラウザはストレージをクリアする可能性があり、「persistent」としてマークされたIndexedDBデータは自動削除から保護されます。

適切な選択をする

LocalStorageを選択する場合:

• 1MB未満のユーザー設定
• シンプルな文字列データ
• クイックプロトタイプ

SessionStorageを選択する場合:

• フォームの下書き
• 一時的なUI状態
• 単一タブのワークフロー

IndexedDBを選択する場合:

• オフライン機能
• 5MB以上のデータ
• 複雑なオブジェクトとファイル
• 検索とフィルタリング要件
• トランザクション整合性のニーズ

結論

LocalStorageとSessionStorageはシンプルなストレージニーズに対して依然として価値がありますが、IndexedDBはパフォーマンスの高いオフライン対応Webアプリケーションを構築するために不可欠です。その非同期性、無制限の容量、トランザクションサポートにより、大規模なデータセットや複雑なデータ構造を保存する唯一の実行可能な選択肢となっています。基本的なキーバリューペアを超えるモダンなJavaScriptブラウザストレージニーズには、IndexedDBが複雑または大規模なクライアントサイドストレージに推奨される選択肢です。

よくある質問

Understand every bug

Uncover frustrations, understand bugs and fix slowdowns like never before with OpenReplay — the open-source session replay tool for developers. Self-host it in minutes, and have complete control over your customer data. Check our GitHub repo and join the thousands of developers in our community.