# 浏览器不通窗口之间的通信

## localStorage

“同源”情况下，一个窗口更新 localStorage，另一个窗口监听 window 对象的 “storage” 事件，来实现通信

```
window.localStorage.setItem('name','杭城小刘');
window.addEventListener('storage', function (e) {
  console.log(e);
  console.log(e.newValue);
})
```

## WebSocket

所有的 WebSocket 都监听同一个服务器地址，利用 `send` 发消息，利用 `onmessage` 获取消息的变化，不仅能窗口，还可以跨浏览器通信，兼容性最佳。只是需要消耗点服务器资源
```
var ws = new WebSockte('ws://192.168.0.0.1:8080/');
ws.onopen = function (event) {
  ws.send({now: new Date()});
}

ws.onmessage = function (event) {
  console.log(event)
}
```


## postMessage

借助 iframe 或 window.open 
```
otherWindow.postMessage(message targetOrigin, [transfer])
``` 

## cookie + setInterval 

在页面 A 设置一个使用 setInterval 定时器不断刷新，检查 Cookies 的值是否变化，如果变化就是进行刷新操作
由于 Cookies 在同一个域下可读，所以这样做的缺点是浪费资源

## SharedWorker

HTML5 中的 Web Worker 可以分为2种不同线程类型，一种是专用线程 Dedicated Worker，一种是共享线程 Shared Worker
- Dedicated Worker 直接使用 new Worker() 创建，这种 webWorker 是当前页面专有的
-  SharedWorker 可以被多个 window、标签页、iframe 共同使用，但必须保证这些标签页都是同源的