How to Listen to LocalStorage Changes Within the Same Browser Tab: Techniques and Implementations

In many web projects developers need to react to changes in localStorage in real time, but the native storage event only fires when the change occurs in a different browser tab, leaving the same‑tab scenario unsupported.

The classic workaround is to rely on the storage event, which works across tabs, or to resort to simple polling with setInterval. Polling is easy to implement but can cause noticeable performance overhead, especially at high frequencies.

let lastValue = localStorage.getItem('myKey');
setInterval(() => {
  const newValue = localStorage.getItem('myKey');
  if (newValue !== lastValue) {
    lastValue = newValue;
    console.log('Detected localStorage change:', newValue);
  }
}, 1000); // check every second

A more flexible alternative is to intercept localStorage.setItem with a proxy or publish‑subscribe pattern, manually dispatching an event after each write. This method offers extensibility but requires extra maintenance.

(function(){
  const originalSetItem = localStorage.setItem;
  const subscribers = [];
  localStorage.setItem = function(key, value){
    originalSetItem.apply(this, arguments);
    subscribers.forEach(cb => cb(key, value));
  };
  function subscribe(callback){
    subscribers.push(callback);
  }
  subscribe((key, value) => {
    if (key === 'myKey') {
      console.log('Detected localStorage change:', value);
    }
  });
  localStorage.setItem('myKey', 'newValue');
})();

Four efficient solutions are proposed for same‑tab monitoring:

1. Custom StorageEvent

localStorage.setItem('myKey', 'value');
const storageEvent = new StorageEvent('storage', {key: 'myKey', url: window.location.href});
window.dispatchEvent(storageEvent);

2. Custom CustomEvent

localStorage.setItem('myKey', 'newValue');
const customEvent = new CustomEvent('localStorageChange', {detail: {key: 'myKey', value: 'newValue'}});
window.dispatchEvent(customEvent);

3. MessageChannel

const channel = new MessageChannel();
channel.port1.onmessage = event => console.log('Detected localStorage change:', event.data);
localStorage.setItem('myKey', 'newValue');
channel.port2.postMessage(localStorage.getItem('myKey'));

4. BroadcastChannel

const channel = new BroadcastChannel('storage_channel');
channel.onmessage = event => console.log('Detected localStorage change:', event.data);
localStorage.setItem('myKey', 'newValue');
channel.postMessage({key: 'myKey', value: 'newValue'});

The table below summarises the pros, cons and typical use cases of each method:

Solution

Pros

Cons

Typical Use Cases

Polling

Simple implementation, suitable for low‑frequency monitoring

Poor performance when polling frequently

Quick prototypes or low‑traffic scenarios

Proxy / Pub‑Sub

Highly flexible, works for complex projects

Requires manual interception of setItem, higher maintenance

Projects that need custom event publishing

Custom StorageEvent Simple, leverages native storage handling

Must manually dispatch the event

Same‑tab localStorage listening

Custom CustomEvent Very flexible, can be reused for other data flows

Manual dispatch required

Scenarios needing bespoke trigger conditions MessageChannel Ideal for component communication and complex apps

Implementation is more complex, overkill for simple cases

Advanced component communication BroadcastChannel Supports cross‑page communication, easy to implement

Use cases are relatively specific

Multi‑window or multi‑tab synchronization

In mainstream front‑end frameworks the same techniques can be applied. For React, a component can register a storage listener inside useEffect and optionally dispatch a custom StorageEvent to simulate same‑tab updates.

import React, { useEffect } from 'react';
const LocalStorageListener = () => {
  useEffect(() => {
    const handle = event => {
      if (event.key === 'myKey') {
        console.log('Detected localStorage change:', event.newValue);
      }
    };
    window.addEventListener('storage', handle);
    return () => window.removeEventListener('storage', handle);
  }, []);
  return (
    <div>
      <button onClick={() => localStorage.setItem('myKey', 'newValue')}>Modify localStorage</button>
      <button onClick={() => {
        const ev = new StorageEvent('storage', {key: 'myKey', newValue: localStorage.getItem('myKey'), url: location.href});
        window.dispatchEvent(ev);
      }}>Trigger StorageEvent</button>
    </div>
  );
};
export default LocalStorageListener;

For Vue 3, the Composition API’s onMounted and onUnmounted hooks manage the listener, and a custom StorageEvent can be dispatched similarly.

<template>
  <div>
    <button @click="updateLocalStorage">Modify localStorage</button>
    <button @click="triggerCustomStorageEvent">Trigger StorageEvent</button>
  </div>
</template>
<script setup>
import { onMounted, onUnmounted } from 'vue';
const handle = e => { if (e.key === 'myKey') console.log('Detected localStorage change:', e.newValue); };
const updateLocalStorage = () => localStorage.setItem('myKey', 'newValue');
const triggerCustomStorageEvent = () => {
  const ev = new StorageEvent('storage', {key: 'myKey', newValue: 'newValue', url: location.href});
  window.dispatchEvent(ev);
};
onMounted(() => window.addEventListener('storage', handle));
onUnmounted(() => window.removeEventListener('storage', handle));
</script>

Both frameworks can further encapsulate the logic into reusable hooks or utility functions, as shown by the custom React hook useLocalStorageListener and the Vue composable useLocalStorageListener presented in the article.

In summary, monitoring localStorage within the same tab is achievable with a range of solutions—from simple custom events to advanced channel APIs—allowing developers to pick the approach that best matches their performance requirements and architectural complexity.