因为每个 tab 都是独立的浏览上下文（除非使用特定技术），它们之间不能直接共享 JavaScript 对象或服务实例。不过，可以通过以下几种方式实现 tab 页签之间的交互：
通过 localStorage 或 sessionStorage + 事件监听
localStorage 和 sessionStorage 是浏览器提供的 Web 存储机制，不同的 tab 可以访问同一个 localStorage 或 sessionStorage，并且可以通过监听 storage 事件来实现跨 tab 页签的数据同步。
示例：
页面 1：更新 localStorage 中的数据。
页面 2：通过监听 storage 事件获取数据变化。
页面 1：
// 更新 localStorage 数据
localStorage.setItem('sharedData', JSON.stringify({ key: 'value' }));
页面 2：
// 监听 localStorage 数据变化
window.addEventListener('storage', function(event) {if (event.key === 'sharedData') {const data = JSON.parse(event.newValue);console.log(data); // 输出：{ key: 'value' }}
});
在这个场景下，页面 1 更新 localStorage 后，页面 2 会接收到 storage 事件并可以获取最新的 sharedData。
通过 WebSocket
如果你的应用需要在多个 tab 页签之间进行实时通信，并且数据量较大或通信频繁，可以使用 WebSocket 进行通信。WebSocket 允许客户端与服务器之间建立长连接，并且服务器可以向所有连接的客户端广播消息。
示例：
页面 1（发送数据）：
const socket = new WebSocket('ws://example.com/socket');// 发送消息
socket.send(JSON.stringify({ key: 'value' }));
页面 2（接收数据）：
const socket = new WebSocket('ws://example.com/socket');// 接收消息
socket.addEventListener('message', function(event) {console.log(event.data); // 输出：{ key: 'value' }
});
WebSocket 是实时双向通信的工具，适用于需要跨 tab 页签和多个客户端之间的即时消息传递，通常用于聊天室、实时通知等场景。
通过 IndexedDB
IndexedDB 是一种在浏览器中存储较大数据的机制，支持异步读取和写入。不同的 tab 页签可以访问同一个 IndexedDB 数据库，适合在多个标签页之间共享大量数据或复杂结构的数据。
示例：
页面 1：写入数据到 IndexedDB
const request = indexedDB.open('myDatabase', 1);request.onsuccess = function(event) {const db = event.target.result;const transaction = db.transaction(['myStore'], 'readwrite');const store = transaction.objectStore('myStore');store.put({ key: 'value' }, 'sharedData');
};
页面 2：读取 IndexedDB 数据
const request = indexedDB.open('myDatabase', 1);request.onsuccess = function(event) {const db = event.target.result;const transaction = db.transaction(['myStore'], 'readonly');const store = transaction.objectStore('myStore');const dataRequest = store.get('sharedData');dataRequest.onsuccess = function() {console.log(dataRequest.result); // 输出：{ key: 'value' }};
};
IndexedDB 更适合存储复杂数据，适用于需要在多个标签页间共享更大、更复杂的数据集的场景。
总结
localStorage + storage 事件：适合简单的、基于本地存储的数据同步。
WebSocket：适用于实时数据通信，尤其是在多个客户端或 tab 之间需要频繁交互的场景。
IndexedDB：适用于跨多个 tab 页签共享较大或复杂的数据。
