React で localStorage を読み書きする

localStorage は、4 つの基本メソッド、setItem(key, value)、getItem(key)、removeItem(key)、clear() を備えた、ブラウザー組み込みのストレージです。データはページの再読み込み後もブラウザーの再起動後も保持されます。

window オブジェクト上に存在し、オリジンごとに分離されます。つまり、ドメインごとに独立したストレージが用意されます。

localStorage のすべての呼び出しは、メインスレッド上で同期的に実行されます。大量のデータを読み書きすると、描画がブロックされ、UI の動作がぎこちなくなることがあります。

そのため、保存する値は小さく保ち、キー入力やスクロールのイベントが発生するたびに書き込むことは避けてください。

localStorage に保存できるのは文字列だけです。オブジェクトや配列を保存するには、setItem を呼び出す前に JSON.stringify(value) でシリアライズする必要があります。

文字列以外の値を直接保存すると文字列に変換されるため、オブジェクトは役に立たない [object Object] という文字列になります。

読み取るときは JSON.parse(localStorage.getItem(key)) を呼び出しますが、保存された文字列が壊れていたり、別のソースによって書き込まれていたりすると、パースで例外が発生することがあります。

パース処理を try/catch で囲み、デフォルト値にフォールバックしてください。これにより、不正なエントリーがコンポーネントをクラッシュさせるのを防げます。

localStorage は常に利用できるとは限りません。サーバーサイドレンダリング中は window が存在せず、一部のプライベートブラウジングモードでは書き込み時に例外が発生します。機能の有無を確認してアクセスを保護してください。

安全なテスト方法は、ダミーキーを設定して削除する try/catch を使い、例外が発生した場合は false を返すことです。

ほとんどのブラウザーでは、オリジンごとのlocalStorageの容量が約5MBに制限されています。これを超えて書き込もうとすると、QuotaExceededErrorがスローされます。

そのため、localStorageは小さなデータには適していますが、画像や大規模なデータセット、キャッシュしたAPIレスポンスには向いていません。

適しているのは、UIやユーザーの状態に関する、小さく機密性のないデータです。たとえば、テーマ設定、サイドバーを折りたたんだ状態、最後に使用したフィルター、閉じたバナー、未保存のフォームの下書きなどです。

これらは再読み込み後も保持したい値ですが、サーバーへの往復通信を必要としません。

トークンやパスワードのような秘密情報は保存しないでください。ページ上のどのスクリプトからもlocalStorageを読み取れるため、XSSに対して脆弱になるからです。また、大きなオブジェクトや、サーバーを正とする状態も保存しないでください。

機密性の高い認証データはhttpOnly Cookieに保存し、正規のデータはサーバーに置きます。

両者は同じAPIを共有しますが、sessionStorageはタブを閉じると消去され、タブ間で共有されません。localStorageは無期限に保持され、同じオリジンのすべてのタブで共有されます。

短期間だけタブ単位で使うデータにはsessionStorageを、長期間保持する設定にはlocalStorageを選びます。

Cookieは小さく、すべてのHTTPリクエストとともに送信されるため、認証には適していますが、一般的なデータに使うと帯域幅を無駄に消費します。IndexedDBは、5MBの制限を大幅に超える大規模な構造化データに適した非同期データベースです。

サーバーが読み取る認証情報にはCookie、小さなクライアント側の設定にはlocalStorage、大きなデータや複雑なデータにはIndexedDBを選びます。

最小限のヘルパーでは、localStorage.setItem(key, JSON.stringify(value))を使って書き込み、JSON.parse(localStorage.getItem(key))を囲む保護されたtry/catchを使って読み込みます。失敗時にはデフォルト値を返します。

この小さなラッパーにより、シリアライズとエラー処理を1か所にまとめられます。

localStorageで扱うデータ型について理解度を確認しましょう。

localStorageのAPIと、それが同期的で文字列のみを扱い、容量が約5MBに制限されることを学びました。また、安全にパースする方法や、SSRとプライベートモードで利用可能か確認する方法も学びました。

さらに、sessionStorage、Cookie、IndexedDBと比較し、適切な保存先を選ぶ方法も学びました。