How to implement communication between multiple tabs in the browser?

localstorage

The read-only localStorage property allows you to access a Document source (Origin) object Storage; The stored data is saved in the browser session. LocalStorage is similar to sessionStorage, but the difference lies in that: Data stored in localStorage can be retained for a long time. When the page session ends — that is, when the page is closed, the data stored in sessionStorage is erased.

Note that whether the data is stored in localStorage or sessionStorage, they are specific to the protocol of the page.

Also, key-value pairs in localStorage are always stored as strings. Note that key-value pairs are always stored as strings compared to JS objects, which means that numeric types are automatically converted to string types.

SetInterval timer + cookies

Set A setInterval timer on page A to refresh continuously to check whether the value of Cookies changes, and refresh if it does. Since Cookies are readable in the same domain, the value of Cookies can be changed during the audit of page B, so page A can be obtained naturally. This would have done the job I wanted, but it would have been a waste of resources. While it’s hard to feel wasteful in this era of over-performance, this implementation is really not elegant.

Html5 browser’s new feature SharedWorker

The SharedWorker interface represents a specific type of worker and can be accessed from several browsing contexts, such as Windows, iframes, or other workers. They implement an interface different from ordinary workers with different global scope.