LocalStorage Storage

2025年01月19日

柏拉文

越努力，越幸运

一、认识

---

LocalStorage 在同一源（同域名、协议、端口）下的标签页共享数据。当一个标签页更新 LocalStorage 时，其它标签页会触发 storage 事件。

二、实现

---

2.1 发布消息

function broadcastMessage(key, data) {
    localStorage.setItem(key, JSON.stringify(data));
    localStorage.removeItem(key); // 触发 storage 事件
}

// 示例
broadcastMessage('message', { text: 'Hello, Tabs!' });

2.2 接收消息

window.addEventListener('storage', (event) => {
    if (event.key === 'message') {
        const data = JSON.parse(event.newValue);
        console.log('Received message:', data);
    }
});