学习笔记-浏览器内多个标签页之间的通讯

在多页应用中，浏览器内多个标签页之间的通讯可以通过以下几种技术手段实现：

• 原理：利用localStorage的事件监听机制，当一个标签页修改localStorage时，其他标签页可以通过监听storage事件来获取变化。
• 示例代码：// 添加/修改/删除内容localStorage.setItem(key, value);localStorage.removeItem(key);// 监听storage事件window.addEventListener('storage', function(event) { console.log(event.key + '=' + event.newValue);});

• 原理：将要传递的信息存储在cookie中，通过定时器在另一个标签页中读取cookie的值。
• 示例代码：// 设置cookiedocument.cookie = "name=" + name;// 获取cookiefunction getCookie(key) { const _string = '{"' + document.cookie.replace(/;s+/gim, '","').replace(/=/gim, '":"') + '"}'; return JSON.parse(_string)[key];}// 定时读取cookiesetInterval(function() { const value = getCookie('name'); console.log(value);}, 1000);

• 原理：利用WebSocket的全双工通信特性，多个标签页可以监听服务器推送的事件来实现通讯。
• 特点：

  建立在TCP协议之上，服务器实现容易。

  与HTTP协议有良好的兼容性。

  数据格式轻量，性能开销小。

  可以发送文本或二进制数据。

  无同源限制。

• 示例代码：// 浏览器端代码const socket = new WebSocket("ws://localhost:8080");socket.addEventListener("open", function(event) { socket.send("Hello Server!");});socket.addEventListener("message", function(event) { console.log("Message from server", event.data);});

• 原理：SharedWorker可以被多个窗口或标签页共享，适用于同源的多个页面之间的通讯。
• 示例代码：// worker.jslet data = "";onconnect = function(event) { let port = event.ports[0]; port.onmessage = function(e) { if (e.data === "get") { port.postMessage(data); } else { data = e.data; } };};// 主页面代码try { var worker = new SharedWorker("worker.js"); worker.port.addEventListener("message", function(e) { console.log("获取到数据", e.data); }); worker.port.start(); worker.port.postMessage("初始数据");} catch (error) { console.log("错误", error);}

• localStorage：简单易用，适合存储少量数据，通过事件监听实现通讯。
• Cookie + setInterval：适用于需要兼容旧浏览器的场景，但效率较低。
• WebSocket：适合需要实时双向通讯的场景，性能较好。
• SharedWorker：适合同源的多个页面之间共享数据，但兼容性稍差。

根据具体需求和场景选择合适的方法，可以实现浏览器内多个标签页之间的有效通讯。