Keep multiple tabs instantly in sync, no server, no frameworks, just pure JavaScript magic.

---

Introduction

Ever opened your app in two browser tabs, updated something in one tab, and then wondered why the other one didn’t update too?

Whether it’s user preferences, dark mode settings, logout status, or shopping cart data, keeping multiple tabs in sync is a common headache.

Most developers reach for complex solutions like websockets or server-side sync, but here’s the secret: you don’t need any of that for same-browser communication.

Modern browsers already give us an elegant way to sync state across tabs instantly, locally, and with just a few lines of JavaScript.

In this post, you’ll learn:

• The real problem behind out-of-sync tabs
• Three easy ways to fix it (with code)
• How the BroadcastChannel API makes it ridiculously simple
• Real-world use cases like logout sync, live preferences, and session clearing

Let’s fix your tabs once and for all.

---

1. The Problem: Tabs Don’t Share State by Default

Each browser tab runs its own JavaScript execution context, basically, its own little world.

If you update data in one tab, like setting an item in localStorage or changing your app state, the other tabs don’t automatically know unless you reload them.

Here’s what usually happens:

1. You log out in one tab.
2. The other tab still shows you as logged in.
3. Confusion (and sometimes security issues) follow.

We need a way for tabs to “talk” to each other in real-time.

---

2. Option 1: The Old storage Event Trick

The simplest method is to use the storage event, which fires whenever localStorage is changed in another tab.

Example

// Tab 1: Update something
localStorage.setItem('theme', 'dark');

// Tab 2: Listen for changes
window.addEventListener('storage', (event) => {
  if (event.key === 'theme') {
    console.log('Theme changed to:', event.newValue);
    document.body.setAttribute('data-theme', event.newValue);
  }
});

✅ Pros:

• Works in all modern browsers.
• No libraries or extra setup.

❌ Cons:

• Doesn’t fire in the same tab where you make the change.
• Works only withlocalStorage, not session or memory state.
• Slightly delayed, and not suitable for high-frequency updates.

Still, for small things like syncing dark mode, it’s a perfectly fine approach.

---

3. Option 2: The Smarter Way BroadcastChannel API

The BroadcastChannel API is the clean, modern way to keep tabs in sync.

It lets you create a communication channel between multiple tabs or windows and send messages instantly.

Example

// Create a channel
const channel = new BroadcastChannel('app_sync');

// Listen for messages
channel.onmessage = (event) => {
  console.log('Message from another tab:', event.data);
};

// Send a message
channel.postMessage({ action: 'logout' });

Now every tab connected to 'app_sync' will receive that message in real-time.

Real-World Example: Sync Logout Across Tabs

// logout.js
const channel = new BroadcastChannel('user_channel');

// When user logs out
function logoutUser() {
  // Clear user data
  localStorage.removeItem('token');
  // Notify all tabs
  channel.postMessage({ type: 'LOGOUT' });
  window.location.reload();
}

// Listen for logout from other tabs
channel.onmessage = (event) => {
  if (event.data.type === 'LOGOUT') {
    localStorage.removeItem('token');
    window.location.reload();
  }
};

Now, if the user logs out in one tab, all other tabs log out instantly, no reload needed.

That’s pure browser-level sync.

---

4. Option 3: Shared Worker (For Advanced Cases)

If you need tab sync plus shared logic, you can use a Shared Worker, a single script shared by multiple tabs.

Each tab connects to the worker and exchanges messages through a MessagePort.

Here’s a tiny example:

sharedWorker.js

onconnect = (event) => {
  const port = event.ports[0];
  port.onmessage = (e) => {
    // Broadcast to all connected ports
    ports.forEach(p => p.postMessage(e.data));
  };
  ports.push(port);
};

This allows more advanced workflows (like shared caching or long-running processes), but for most apps, it BroadcastChannel is simpler and faster to implement.

---

5. Which One Should You Use?

For 95% of apps, BroadcastChannel is the right balance between simplicity and power.

---

6. Building a Simple Tab Sync Utility

Here’s a small reusable helper you can drop into any project:

class TabSync {
  constructor(channelName) {
    this.channel = new BroadcastChannel(channelName);
  }

  on(eventType, handler) {
    this.channel.onmessage = (e) => {
      if (e.data.type === eventType) handler(e.data.payload);
    };
  }

  emit(eventType, payload) {
    this.channel.postMessage({ type: eventType, payload });
  }

  close() {
    this.channel.close();
  }
}

// Usage
const tabSync = new TabSync('my_app');
tabSync.on('UPDATE_THEME', theme => {
  document.body.dataset.theme = theme;
});

function toggleTheme() {
  const newTheme = document.body.dataset.theme === 'light' ? 'dark' : 'light';
  document.body.dataset.theme = newTheme;
  tabSync.emit('UPDATE_THEME', newTheme);
}

Now, toggling dark mode in one tab will instantly update all open tabs, clean, no dependencies, and just a few lines of code.

---

7. Handling Edge Cases

A few tips to make this bulletproof:

1. Always close channels
 When a page unloads, close the channel to prevent leaks.

window.addEventListener('beforeunload', () => channel.close());

2. Validate messages
 Add checks for the expected message structure before acting on it.

3. Handle unavailable APIs gracefully
 Fallback to the storage event if BroadcastChannel isn’t supported.

if (!('BroadcastChannel' in window)) {
  console.warn('BroadcastChannel not supported, using localStorage fallback');
}

---

8. Real-World Scenarios

Here are a few examples of where developers use tab syncing:

1. Auth and Session Management

If a user logs out in one tab, all others should too.

2. Preference Sync

Dark mode, language, layout, or font size settings.

3. Shopping Carts or Drafts

When users edit items or forms in one tab, others stay in sync.

4. Admin Dashboards

Sync notifications or analytics updates between multiple open views.

---

9. Performance and Browser Support

BroadcastChannel is widely supported:
✅ Chrome, Edge, Firefox, Safari (v15.4+).
❌ Not supported in Internet Explorer.

Performance-wise, it’s event-driven, not polling-based, meaning it’s lightweight and instant.

Messages don’t leave the device, so there’s no server or network overhead.

---

Conclusion

You don’t need websockets, local servers, or hacks to keep browser tabs in sync.

With the BroadcastChannel API, you can communicate between tabs in milliseconds cleanly, securely, and with just a few lines of code.

Next time you’re handling logout flows, theme toggles, or real-time UI updates, skip the complexity and reach for this modern browser superpower.

Pro Tip: Combine BroadcastChannel with the storage event for maximum reliability, BroadcastChannel for live sync, and storage as a fallback when needed.

---

Call to Action

Have you used BroadcastChannel or another trick to sync tabs?
Share your approach in the comments, and don’t forget to bookmark this post for the next time your tabs go out of sync.