Storage EVENT Method for Communication between Pages

Xiaobian to share the way Storage Event to realize the communication between the page, I hope everyone will read this article, let us discuss it!

We all know that Window.onStorage must meet the following two conditions:

  1. Save (update) Save (update) with LocalStorage.SetItem or sessionStorage.SetItem

  2. When saving (update) this Storage, its new value must be different from the previous value

The above second condition, simply : Either Storage initialization, because there is no Storage, its value is null; either to update the existing Storage


 // Initialization StorageWindow .localStorage.SetItem ('a', 123); // Register OnStorage Events Window.onStorage = (E) => {Console.log (e);}; // Update StorageWindow.localStorage.SetItem ('A', 123   
The last row code above does not trigger an onStorage event because the value of A does not change, and there is 123 before and after, so the browser determines that this update is invalid

Since the onStorage event is triggered by the browser, if we open multiple

The page under the same domain , and perform a Window.LocalStorage.SetItem method in one of them. To ensure the second condition mentioned in the beginning of the article), then other pages are listened to the onStorage event, the onStorage event callback in these pages will be executed


// Register OnStorage Event Window.onStorage = (E) => {Console.log (e);};
// Register an onStorage event WINDOW.OnStorage = (E) => {Console.log (e);};
 // http: //www.example. Com / c.html  // Trigger the onStorage event window.localStorage.SetItem ('a', new date (). getTime ());    
As long as to ensure C. Open after the A and B pages (even three pages are not in the same browser window, here you need the difference between the window and TAB page), then the onStorage event in the A and B pages will be triggered
 We already know how to use Storage Event to implement communication between the page, then this communication is what we use?  In fact, we just need to know which Storage update operation triggered the onStorage event, so how do we know? OnStorage event callback and other event callback functions, there is also an EVENT object parameter, there are 3 useful properties in this object, which are:    
Key is initialized or updated Storage key name

OldValue is initially or updated by the value before the Storage

NEWVALUE is initialized or updated by the value
  1. combined with these three critical properties, we can implement data synchronization between the page
  2. Finally, the difference between localStorage and sessionStorage

    The data stored in LocalStorage has no expiration time setting, and the data stored in SessionStorage is cleared at the end of the page session
  3. After reading this Article, I believe that you have a certain understanding of the way to communicate between the Storage Event, I want to know more related knowledge. Welcome to Tumi Yun Industry Information Channel, thank you for reading!

© Copyright Notice
Just support it if you like
comment Grab the couch

Please log in to comment