window.onstorage をトリガーするには、次の 2 つの条件を満たす必要があることは誰もが知っています。
上記の 2 番目の条件は、簡単に言えば、ストレージが存在しないため、その値が null であるためにストレージを初期化するか、既存のストレージを更新するかのいずれかです。
例：
// storagewindow.localStorage.setItem('a', 123); // onstorage イベントを登録 window.onstorage = (e) => { console.log(e);} // storagewindow.localStorage.setItem(' a'、123);上記のコードの最後の行は、onstorage イベントをトリガーしません。これは、 a の値が変更されておらず、前後で 123 であるため、ブラウザーはこの更新が無効であると判断します。
onstorage イベントはブラウザによってトリガーされるため、同じドメイン名で複数のページを開いて、それらのいずれかで window.localStorage.setItem メソッドを実行すると (記事の冒頭で説明した 2 番目の項目も確認する必要があります)条件が満たされている場合)、他のページが onstorage イベントをリッスンすると、これらのページの onstorage イベント コールバックが実行されます。
例：
// http://www.example.com/a.html<script>// onstorage イベントを登録 window.onstorage = (e) => { console.log(e);};</script> // http://www.example.com/b.html<script>// onstorage イベントを登録 window.onstorage = (e) => { console.log(e);};</script> // http://www.example.com/c.html<script>// ストレージ イベントをトリガーします window.localStorage.setItem('a', new Date().getTime());</script>ページ a と b の後にページ c が開かれることが保証されている限り (3 つのページが同じブラウザ ウィンドウ内にない場合でも、ウィンドウとタブ ページの違いを区別する必要があります)、ページ内の onstorage イベントはaとbがトリガーされます。
ストレージ イベントを使用してページ間の通信を実現する方法がわかったところで、この通信はどのような用途があるのでしょうか?
実際、どのストレージ更新操作が onstorage イベントをトリガーしたかを知る必要があるだけです。 onstorage イベント コールバックは、他のイベント コールバック関数と同様に、イベント オブジェクト パラメーターを受け取ります。このオブジェクトには次の 3 つの便利なプロパティがあります。
これら 3 つの主要な属性を組み合わせることで、ページ間のデータ同期を実現できます。
最後に、localStorage と sessionStorage の違いについて触れておきます。
localStorage に保存されたデータには有効期限の設定がなく、sessionStorage に保存されたデータはページ セッションが終了するとクリアされます。
以上がこの記事の全内容です。皆様の学習のお役に立てれば幸いです。また、VeVb Wulin Network をご支援いただければ幸いです。