38. What is a storage event and its event handler?

A storage event is an event that gets triggered when changes are made to the localStorage or sessionStorage objects. This event allows different tabs or windows to communicate with each other when the stored data is modified.

When is a storage event triggered?

• A storage event is fired when:
  • A value is added, modified, or removed from localStorage or sessionStorage.
  • The change happens in a different tab or window (the event does not trigger in the same tab where the change is made).

Event Handler Syntax

You can listen to the storage event using the window.addEventListener method:

javascript
CopyEdit
window.addEventListener('storage', (event) => {
  console.log('Key changed:', event.key);
  console.log('New value:', event.newValue);
  console.log('Old value:', event.oldValue);
  console.log('Storage area:', event.storageArea);
  console.log('URL:', event.url);
});

Example

1. Tab 1: Set a value in localStorage:

javascript
CopyEdit
localStorage.setItem('theme', 'dark');

2. Tab 2: Listen for changes to localStorage:

javascript
CopyEdit
window.addEventListener('storage', (event) => {
  if (event.key === 'theme') {
    console.log(`Theme changed from ${event.oldValue} to ${event.newValue}`);
  }
});

Explanation of storage event properties

Output Example

If the value of 'theme' is changed from 'dark' to 'light', the console will show:

css
CopyEdit
Theme changed from dark to light

Key Points

• The storage event only works across different browser tabs or windows.
• The event does not fire if the change happens in the same tab.
• sessionStorage changes do not trigger the event between different tabs because sessionStorage is unique to each tab.