React: ローカル ストレージと同期する
P粉214176639
P粉214176639 2024-02-03 23:49:55
0
1
467

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

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

リーリー

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

リーリー

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

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

P粉214176639
P粉214176639

全員に返信(1)
P粉727531237

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

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

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

いいねを押す +0
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト:福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!