Broadcasting

By design, the localDataStorage interface sends custom events locally to the same tab/window in which the storage change event occurred. Yet equally as convenient, it also broadcasts to any other tabs or windows on the same origin via the Broadcast Channel API. In this way, browsing contexts can be kept in sync, if necessary.

(Web content's origin is defined by the scheme (protocol), hostname (domain), and port of the URL used to access it. Two objects have the same origin only when the scheme, hostname, and port all match.)

The default channel name is localDataStorage and can be renamed using the broadcast method. The channel name is stored in the channel property.

To listen on the channel, use code like this

const myChannel = new BroadcastChannel( 'localDataStorage' );
myChannel.addEventListener( 'message', (event) => {
    console.log( event.data );
});

where the subscriber will receive a JSON detailing the change event, for example: