React: ローカル ストレージと同期する

Question

React アプリケーションを用意します。特定のコンポーネントは、一定期間にわたって同じキーを使用してローカル ストレージに異なるデータ値を設定します。ローカル ストレージにあるこのプロジェクトのいくつかのコンポーネントをサブスクライブする必要があります。特定のキーを持つ値がローカル ストレージで更新されるたびに、サブスクライブされたコンポーネントに通知されるか、ローカル ストレージの更新された値が提供される必要があります。

これ用のカスタム フックを作成し、以下に示すように storage イベントにイベント リスナーを追加して使用してみました。

リーリー

そして、次のようにコンポーネントで使用します:

リーリー

クリック イベントでローカル ストレージの値を更新しようとしましたが、フックはローカル ストレージの更新された値を返しません。開発ツールでローカル ストレージの値が更新されたことを確認しました。問題は、ストレージの変更を引き起こした同じウィンドウ/タブで storage イベントが発生していないことのようです。

localstorage の値をサブスクライブする方法はありますか?

Answer 1

あなたがとったアプローチは正しいですが、ストレージの変更を引き起こした同じウィンドウ/タブでストレージ イベントが発生しないという点は正しいです。ストレージ イベントは、ストレージが別のウィンドウまたはタブによって変更されたことを他のウィンドウまたはタブに通知することを目的としています。

あなたの場合、同じウィンドウで localStorage 値を更新しているため、ストレージ イベントはトリガーされず、したがってサブスクライブしているコンポーネントは更新を受け取りません。

この制限を克服するには、カスタム フックを変更して、別のメカニズムを使用してサブスクライブするコンポーネントに localStorage 値の変更を通知します。 1 つのアプローチは、別のイベント システム (React Context API や Redux などの状態管理ライブラリなど) を使用してコンポーネント間の通信を処理することです。