在前端开发过程中，有时需要在相同来源下的不同标签或窗口之间进行通信。例如，在一个页面中打开了多个子标签页或者弹出了一个新的浏览器窗口，这些标签或窗口可能需要共享数据或者相互通信。
传统方法：使用全局变量
在传统的前端开发中，我们可以使用全局变量来实现标签/窗口之间的通信。例如，在一个页面中打开了两个子标签页，我们可以通过将数据存储到一个全局变量中，然后在另一个标签页中读取该变量来实现数据的共享。
示例代码：
// 在第一个标签页中定义全局变量
window.sharedData = {
message: 'Hello, world!'
};
// 在第二个标签页中读取全局变量
console.log(window.sharedData.message); // 输出：'Hello, world!'然而，这种方法存在一些问题。首先，如果我们在一个标签页中修改了全局变量的值，那么其他标签页也会受到影响，这可能导致不可预期的行为。其次，使用全局变量需要注意避免变量名冲突的问题，否则可能会覆盖其他变量的值，造成程序错误。
现代方法：使用 Web Storage API 和广播机制
现代的前端开发中，我们可以使用 Web Storage API 和广播机制来实现标签/窗口之间的通信。Web Storage API 提供了 localStorage 和 sessionStorage 两个对象，可以在不同标签页或窗口之间共享数据。广播机制则使用了浏览器的事件机制，可以使得一个标签页或窗口向其他标签页或窗口发送消息。
使用 localStorage
localStorage 是一个存储在客户端浏览器中的键值对存储系统。它提供了 setItem、getItem、removeItem 等方法，可以方便地读写数据。
示例代码：
// 在第一个标签页中设置 localStorage
localStorage.setItem('message', 'Hello, world!');
// 在第二个标签页中获取 localStorage
console.log(localStorage.getItem('message')); // 输出：'Hello, world!'需要注意的是，localStorage 存储的数据类型只能是字符串，如果需要存储其他类型的数据，需要进行序列化和反序列化操作。
使用 sessionStorage
与 localStorage 类似，sessionStorage 也是一个存储在客户端浏览器中的键值对存储系统。它创建的数据仅在当前会话中可用，并在关闭窗口后自动删除数据。
示例代码：
// 在第一个标签页中设置 sessionStorage
sessionStorage.setItem('message', 'Hello, world!');
// 在第二个标签页中获取 sessionStorage
console.log(sessionStorage.getItem('message')); // 输出：'Hello, world!'使用广播机制
广播机制可以让一个标签页或窗口向其他所有标签页或窗口发送消息。在浏览器中，我们可以使用 BroadcastChannel API 来实现广播机制。
示例代码：
-- -------------------- ---- ------- -- -------------- ----- ------- - --- ------------------------------- -- -------------- ----------------------------------- ----- -- - ------------------------ -- ---------- ------- --- -- -------------- --------------------------- ---------
需要注意的是，BroadcastChannel API 并不支持所有浏览器，可以使用检测是否支持该 API 的方法来判断是否可以使用广播机制。
总结
相同来源的标签/窗口之间的通信是前端开发中常见的需求。传统的全
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/13523
