Stop using the localStorage hack to sync browser tabs. BroadcastChannel does it natively.

The Problem With localStorage as a Communication Channel

Many developers have fallen into the habit of using localStorage as a makeshift messaging system between browser tabs. The pattern is simple: one tab writes a value, and other tabs listen for the storage event to react. While this works in a pinch, it's fundamentally a workaround. The storage event only fires in other tabs, never in the tab that made the change, leading to awkward edge cases. Additionally, localStorage is synchronous and blocking, which can cause performance issues if used frequently. It also lacks any concept of message acknowledgment or error handling, making it unreliable for anything beyond the most basic coordination.

Introducing the BroadcastChannel API

The BroadcastChannel API provides a native, purpose-built solution for cross-tab communication. It allows different browsing contexts—tabs, windows, iframes, and even service workers—to subscribe to a named channel and exchange messages in real time. Unlike the localStorage hack, messages are delivered to all subscribers, including the sender, which makes application logic more predictable. The API is asynchronous and non-blocking, fitting naturally into modern event-driven JavaScript applications.

Practical Use Cases

Consider a common scenario: a user logs out in one tab. With BroadcastChannel, that tab can immediately notify all others, prompting them to redirect to the login page without requiring a manual refresh. Similarly, when a user updates their shopping cart, every open tab can receive the updated state instantly, ensuring a consistent experience. Other practical applications include:

• Syncing form drafts across tabs so users don't lose work.
• Coordinating dark mode or language preferences in real time.
• Notifying other tabs when a background sync or download completes.
• Managing shared locks or session tokens across multiple windows.

Getting Started with BroadcastChannel

Using BroadcastChannel is straightforward. First, create a channel instance with a descriptive name. Then, attach an event listener to handle incoming messages. To send a message, simply call postMessage on the channel object. When a tab no longer needs to listen, calling close cleans up the connection and prevents memory leaks. Because the API is promise-based and integrates seamlessly with modern frameworks, it's easy to wrap in a small utility module that can be reused across an application.

Further reading: https://bestpractic.org/blog/broadcast-channel-cross-tab-messaging