本地存储 localstorage

1
2
3
4
// 监听storage的变化
window.addEventListener("storage", function (e) {
  console.log(e.key, e.newValue, e.oldValue);
});

频道广播 BroadcastChannel

1
2
3
4
5
6
7
8
// 在需要通信的页面创建名称相同的频道new BroadcastChannel("名称");
var channel = new BroadcastChannel("channel-BroadcastChannel");
// 发送消息
channel.postMessage("Hello, BroadcastChannel!");
// 接收消息
channel.addEventListener("message", function (e) {
  console.log(e.data);
});

postMessage

首先需要拿到目标窗口的 window 对象。一般用于<iframe>

1
otherWindow.postMessage(message, targetOrigin, [transfer]);

otherWindow：目标窗口（你想发送跨域消息的那个窗口），例如：iframe.contentWindow
message：将要发送的数据
targetOrigin：目标窗口的地址（URL），或者字符串’*‘表示无限制、任何 URL 都允许发送
transfer：是一串和 message 同时传递的 Transferable 对象

WebSocket

占用服务器资源，没必要