Shulou(Shulou.com)06/02 Report--

This article mainly introduces the relevant knowledge of "how to complete inter-page communication in html5". Xiaobian shows you the operation process through actual cases. The operation method is simple, fast and practical. I hope this article "how to complete inter-page communication in html5" can help you solve the problem.

We all know that triggering_window.onstorage must satisfy the following two conditions:

Save (update) a storage via localStorage.setItem or sessionStorage.setItem

When saving (updating) this storage, its new value must be different from the previous value

The second condition above is simply: either the initialization of storage, because there is no storage, its value is null; or it is an update to an existing storage.

Examples:

//initialize storagewindow.localStorage.setItem ('a ', 123);//register onstorage event_window.onstorage = (e) => { console.log(e);};//update storagewindow.localStorage.setItem ('a', 123);

The last line of code above does not trigger the onstorage event, because the value of a does not change, it is 123 before and after, so the browser determines that this update is invalid.

Since the onstorage event is browser-triggered, if we open multiple pages under the same domain name and execute the window.localStorage.setItem method on any of them (and ensure that the second condition mentioned at the beginning of this article is met), then if the other pages listen for the onstorage event, the onstorage event callback in these pages will be executed.

Examples:

http://www.example.com/a.html// Register onstorage event_window.onstorage = (e) => { console.log(e);};http://www.example.com/b.html// Register onstorage event_window.onstorage = (e) => { console.log(e);};http://www.example.com/c.html// Trigger onstorage event window.localStorage.setItem ('a ', new Date().getTime());

As long as page c is open after pages a and b (even if the three pages are not in the same browser window, you need to distinguish between windows and tabs), then the onstorage event in pages a and b will be triggered.

Now that we know how to use storage events to communicate between pages, what does this communication do for us?

In fact, we only need to know which storage update operation triggered the onstorage event, so how do we know? The onstorage event callback, like any other event callback function, also takes an event object parameter, in which there are three useful properties:

key The key name of the storage being initialized or updated

oldValue Value before storage is initialized or updated

newValue The value after storage is initialized or updated

Combining these three key attributes, we can achieve data synchronization between pages

Finally, the difference between localStorage and sessionStorage.

Data stored in localStorage has no expiration time set, and data stored in sessionStorage is cleared at the end of the page session

About "html5 how to complete the inter-page communication" content introduced here, thank you for reading. If you want to know more about industry-related knowledge, you can pay attention to the industry information channel. Xiaobian will update different knowledge points for you every day.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.