Learn ECMAScript - Second Edition

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 ...