Home Whiteboard Graphing Calculator Online Compilers Articles Tools
Tutorials Courses Jobs

HTML5 / JS storage event handler

Javascript Web Development Front End Scripts

Storage event handlers in HTML5 only fire when storage changes are triggered by another window or tab. This means storage events won't fire in the same window that made the change.

Syntax

window.addEventListener('storage', function(event) {
    // Handle storage changes from other windows
}, false);

Example: Basic Storage Event Handler

<!DOCTYPE html>
<html>
<head>
    <title>Storage Event Example</title>
</head>
<body>
    <h3>Storage Event Demo</h3>
    <p>Open this page in another tab and click the button to see the event fire.</p>
    <button onclick="updateStorage()">Update Storage</button>
    <div id="output"></div>

    <script>
        // Storage event handler
        window.addEventListener('storage', function(event) {
            const output = document.getElementById('output');
            output.innerHTML = `
                <p>Storage event fired!</p>
                <p>Key: ${event.key}</p>
                <p>Old Value: ${event.oldValue}</p>
                <p>New Value: ${event.newValue}</p>
            `;
        }, false);

        function updateStorage() {
            const timestamp = new Date().getTime();
            localStorage.setItem('timestamp', timestamp);
            console.log('Storage updated with:', timestamp);
        }
    </script>
</body>
</html>

How Storage Events Work

Storage events have the following key characteristics:

  • Cross-window only: Events fire only in other windows/tabs, not the originating window
  • Same origin: Both windows must be from the same origin (protocol, domain, port)
  • localStorage only: Events fire for localStorage changes, not sessionStorage

Event Object Properties

<script>
window.addEventListener('storage', function(event) {
    console.log('Key:', event.key);           // The storage key that changed
    console.log('Old Value:', event.oldValue); // Previous value
    console.log('New Value:', event.newValue); // New value
    console.log('URL:', event.url);           // URL of the page that triggered the event
    console.log('Storage Area:', event.storageArea); // Reference to localStorage
});

// This will NOT trigger the event in the same window
localStorage.setItem('test', 'value');
</script>

Practical Example with Switch Statement

<script>
function storageEventHandler(event) {
    console.log("Storage event for key:", event.key);
    
    switch(event.key) {
        case 'userPreferences':
            updateUITheme(event.newValue);
            break;
        case 'cartItems':
            refreshCartDisplay();
            break;
        case 'notifications':
            showNewNotifications();
            break;
        default:
            console.log('Unhandled storage key:', event.key);
    }
}

window.addEventListener('storage', storageEventHandler, false);

function updateUITheme(theme) {
    console.log('Updating theme to:', theme);
}

function refreshCartDisplay() {
    console.log('Refreshing cart display');
}

function showNewNotifications() {
    console.log('Showing new notifications');
}
</script>

Testing Storage Events

To test storage events:

  1. Open your page in two browser tabs
  2. In Tab 1, set up the storage event listener
  3. In Tab 2, modify localStorage
  4. Tab 1 will receive the storage event

Browser Compatibility

Feature Chrome Firefox Safari Edge
Storage Events 5+ 3.5+ 4+ All versions

Conclusion

Storage events enable cross-tab communication by notifying other windows when localStorage changes. Remember that events only fire in windows other than the one making the change, making them perfect for synchronizing data across multiple tabs of the same application.

Updated on: 2026-03-15T23:18:59+05:30

361 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements