MAL's Logo

Window: Storage Event

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

Code

JavaScript

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

React

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

     window.addEventListener('storage', updatedStorageCart);

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

Resources

  • https://developer.mozilla.org/en-US/docs/Web/API/Window/storage_event
  • MAL's Logo© 2021 – 2026 MAL. All rights reserved.