To pass data between different browsing contexts like passing data between 2 open tabs, passing data between a tab and service worker, or any context of the same origin in JavaScript, you can use the BroadcastChannel API.

First, you have to make an instance of BroadcastChannel with the channel name of your choice.

The channel name should be passed as an argument to the BroadcastChannel() as a string.

// create an instance of BroadcastChannel
// with channel name as test_channel
const channel = new BroadcastChannel("test_channel");

After creating an instance you need to add a message event listener to the channel object so that when you receive messages the callback function inside the event handler is called.

// create an instance of BroadcastChannel
const channel = new BroadcastChannel("test_channel");

// add message event listener to receive meesage
channel.addEventListener("message", (event) => {
  // data property
  console.log(event.data);
});

The callback function is passed with an event object.

You can find the data inside the data property inside the event object.

Now you may think how will I send data?

For that you have to use the postMessage() method in the channel object.

// create an instance of BroadcastChannel
const channel = new BroadcastChannel("test_channel");

// add message event listener to receive meesage
channel.addEventListener("message", (event) => {
  // data
  console.log(event.data);
});

// send some data or message
channel.postMessage({
  name: "John Doe",
  age: 23,
});

Now to test this open a new tab of the website and when you open you can see that the data { name: "John Doe", age: 23 } is shown in the console.

For testing, you can head on to this JS Bin and open a new tab of the same JS BIN URL to see the result.