Ever needed to keep some data in sync between tabs? For example, the checkout page should always display the correct data - and this is where storage event comes in play. Below, you can see implementation examples for vanilla JavaScript and React.

const updatedStorageCart = () => {
      console.log('check, check');
      window.removeEventListener('storage', updatedStorageCart);
};
   
window.addEventListener('storage', updatedStorageCart);

React.useEffect(() => {
    const updatedStorageCart = () => {
            console.log('check, mate');
     };

     window.addEventListener('storage', updatedStorageCart);

     return () => {
         window.removeEventListener('storage', updatedStorageCart);
     };
}, []);

https://developer.mozilla.org/en-US/docs/Web/API/Window/storage_event

The storage event of the Window interface fires when a storage area (localStorage) has been modified in another tab.

Window: Storage Event

Code

JavaScript

React

Resources

Contact me