localStorage storage 事件詳解：跨標籤頁同步的關鍵機制

什麼是 storage 事件？

當 localStorage 或 sessionStorage 數據發生變化時，瀏覽器會在**同源的其他標籤頁/窗口**中觸發 storage 事件。**觸發變化的當前頁面不會收到該事件**（IE 除外）。

W3C 規範核心解讀

The storage event is fired when a storage area changes... at each Window object whose Document object has a Storage object that is affected.

• 不冒泡、不可取消。
• 使用 StorageEvent 接口。
• **跨窗口通信** 的原生橋樑，無需 WebSocket/SharedWorker。

事件對象關鍵屬性

實戰 Demo：雙頁同步

頁面 A（寫入端）

<input id="inp" placeholder="輸入值"> <button id="btn">存入</button>
<script>
const inp = document.getElementById('inp');
const btn = document.getElementById('btn');
btn.onclick = () => {
    const v = inp.value.trim();
    if (!v) return;
    localStorage.setItem('syncKey', v);
    // 當前頁**不會**觸發 storage 事件
};
// 監聽其他頁變化（可選）
window.addEventListener('storage', e => console.log('A 收到:', e));
</script>

頁面 B（讀取/同步端）

<script>
window.addEventListener('storage', e => {
    console.log('B 收到:', e);
    document.body.innerHTML = `oldValue: ${e.oldValue}, newValue: ${e.newValue}`;
    // 這裡可同步更新 UI、重新渲染列表等
});
</script>

典型應用場景

1. 多標籤頁狀態同步：購物車數量、用戶資訊、主題設置修改後，其他頁即時更新。
2. 無感登出/Token 刷新：一處登出/刷新 Token，其餘頁跳轉登錄頁或更新攔截器。
3. 協作編輯提示：檢測到其他頁修改了共享草稿，彈窗提示「已有新版本」。
4. 廣播通知：系統公告、WebSocket 斷線重連狀態同步。

避坑指南

• 同源策略：協議、域名、端口必須完全一致，否則事件不觸發。
• 當前頁不觸發：若需當前頁也響應，手動派發 window.dispatchEvent(new StorageEvent('storage', {...})) 或封裝統一 setItem 方法內部自觸發。
• IE 例外：IE 11 當前頁也會觸發，代碼需去重（如用 e.url === location.href 判斷）。
• 存儲上限：約 5MB，勿存大量冗餘數據；敏感信息加密或勿存。
• 隱私模式：Safari 無痕模式下 localStorage 寫入拋異常，需 try-catch。

封裝建議：統一存儲工具類

const StorageBus = {
    set(key, val) {
        const old = localStorage.getItem(key);
        localStorage.setItem(key, val);
        // 手動觸發當前頁邏輯
        window.dispatchEvent(new StorageEvent('storage', {
            key, oldValue: old, newValue: val, url: location.href, storageArea: localStorage
        }));
    },
    get(key) { return localStorage.getItem(key); },
    remove(key) { localStorage.removeItem(key); },
    onChange(cb) { window.addEventListener('storage', cb); },
    offChange(cb) { window.removeEventListener('storage', cb); }
};

總結

storage 事件是瀏覽器原生提供的**輕量級跨標籤頁總線**，零依賴、零配置、極低延遲。掌握其「異頁觸發、同源限制、事件屬性」三大特性，即可構建健壯的多頁同步體驗。