docs: 批量博文

Chapter2 - Web FrontEnd/2.27.md

@@ -0,0 +1,48 @@
+# 浏览器不通窗口之间的通信
+
+## 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 共同使用，但必须保证这些标签页都是同源的
+
+