Handling storage changes across multiple tabs

Storage, when changed, emits certain events that can be captured by other opened tabs. You can set event listeners for them to listen and perform any appropriate modifications.

For example, let's say that you added something to localStorage in one tab of your website. A user has also opened another tab of your website. If you want to reflect the changes of localStorage in that tab, you can listen to the storage event and update the contents accordingly.

Note that the update event will be fired on every other tab except the one that made the change:

window.addEventListener('storage', e => { 
  console.log(e);
});
localStorage.setItem('myKey', 'myValue'); // note that this line was run in another tab

The preceding code produces the following output:

You can note that it contains a lot of useful information about the storage event.

Note

The web workers (discussed in Chapter 11) do not have access to local storage or session storage.