关于javascript:学习笔记浏览器内多个标签页之间的通讯

Redux vuex 这个是单页面利用里跨页面状态治理 多页利用 跨页面数据传递

本题次要考查多页利用中各个页签之间数据交互的技术手段。

实现多页通信次要有利用

• 浏览器数据存储形式：浏览器数据存储的形式次要用本地存储形式解决，即调用 localStorage、Cookie 等本地存储形式。
• 服务器形式：次要应用 websocket 技术使多页签都监听服务器推送事件来取得其余页签发送的数据。

浏览器存储：

第一种：localStorage：

在一个标签页外面应用 localStorage.setItem(key,value) 增加 (批改、删除) 内容; 在另一个标签页外面监听 storage 事件。即可失去 localstorge 存储的值，实现不同标签页之间的通信。

// 增加
localStorage.setItem(key,value) 
// 删除
localStorage.removeItem(key,value) 

// 增加监听 storage 的变动
window.onload = function () {window.addEventListener('storage', function (event) {
      // event 事件对象蕴含 domain newValue oldValue key
        console.log(event.key + '=' + event.newValue);
    })
}

第二种：cookie+setInterval：

将要传递的信息存储在 cookie 中，每隔肯定工夫读取 cookie 信息，即可随时获取要传递的信息。

在 A 页面将须要传递的音讯存储在 cookie 当中

在 B 页面设置setInterval, 以肯定的工夫距离去读取 cookie 的值。(不停地问 cookie)

// 设置 cookie
document.cookie = "name=" + name;

// 获取 cookie
function getCookie(key) {
  const _string = '{"';
  _string += document.cookie.replace(/;\s+/gim, '","').replace(/=/gim, '":"');
  _string += '"}'[key];

  return JSON.parse(_string);
}

监听服务器事件

第一种：websocket 通信

WebSocket 是全双工（full-duplex）通信天然能够实现多个标签页之间的通信（服务器能够被动发数据给浏览器；浏览器也能够被动发数据给服务器）。

WebSocket 是 HTML 5 新增的协定，它的目标是在浏览器和服务器之间建设一个不受限的双向通信的通道，比如说，服务器能够在任意时刻发送音讯给浏览器。

为什么传统的 HTTP 协定不能做到 WebSocket 实现的性能? 这是因为 HTTP 协定是一一个申请 - 响应协定，申请必须先由浏览器发给服务器，服务器能力响应这个申请，再把数据发送给浏览器。

也有人说，HTTP 协定其实也能实现啊，比方用轮询或者 Comet。这个机制的毛病一是实时性不够, 二是频繁的申请会给服务器带来极大的压力。Comet 实质上也是轮询，然而在没有音讯的状况下，服务器先拖一段时间，等到有音讯了再回复。这个机制临时地解决了实时性问题，然而它带来了新的问题：以多线程模式运行的服务器会让大部分线程大部分工夫都处于挂起状态，极大地节约服务器资源。另外，一个 HTTP 连贯在长时间没有数据传输的状况下，链路上的任何一个网关都可能敞开这个连贯, 而网关是咱们不可控的，这就要求 Comet 连贯必须定期发一些 ping 数据表示连贯失常工作”。

WebSocket 并不是全新的协定，而是利用了 HTTP 协定来建设连贯。

为什么 WebSocket 连贯能够实现全双工通信而 HTTP 连贯不行呢?

实际上通信协定是建设在 TCP 协定之上的, TCP 协定自身就实现了全双工通信，然而 HTTP 协定的申请 - 应答机制限度了全双工通信。WebSocket 连贯建设当前，其实只是简略规定了一下: 接下来，咱们通信就不应用 HTTP 协定了，间接相互发数据吧。平安的 WebSocket 连贯机制和 HTTPS 相似。首先，浏览器用 wss://xx 创立 WebSocket 连贯时，会先通过 HTTPS 创立平安的连贯，而后，该 HTTPS 连贯降级为 WebSocket 连贯，底层通信走的依然是平安的 SSL/TLS 协定。

WebSocket 连贯必须由浏览器发动，特点:

(1)建设在 TCP 协定之上，服务器端的实现比拟容易。

(2)与 HTTP 协定有着良好的兼容性。默认端口也是 80 和 443，并且握手阶段采纳 HTTP 协定，因而握手时不容易屏蔽，能通过各种 HTTP 代理服务器。

(3)数据格式比拟轻量, 性能开销小，通信高效。

(4)能够发送文本，也能够发送二进制数据。

(5)没有同源限度，客户端能够与任意服务器通信。

(6)协定标识符是 ws (如果加密, 则为 wss)，服务器网址就是 URL。

示例：浏览器端代码

// Create WebSocket connection.
const socket = new Websocket("ws://localhost:8080");

// Connection opened
socket.addEventListener("open", function (event) {socket.send("Hello Server!");
});

// Listen for messages
socket.addEventListener("message", function (event) {console.log("Message from server", event.data);
});

第二种：html5 浏览器的新个性 SharedWorker 大

一般的 webworker 间接应用 new Worker() 即可创立，这种 webworker 是以后页面专有的。而后还有种共享 worker(SharedWorker)，这种是能够多个标签页、iframe 独特应用的。SharedWorker 能够被多个 window 独特应用，但必须保障这些标签页都是同源的(雷同的协定，主机和端口号)

首先新建一个 is 文件 worker.js, 具体代码如下: .

// shareWorker 所要用到的 js 文件，不用打包到我的项目中，间接放到服务器即可

let data = " ";
let 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");
  var getBtn = document.getElementById("get");
  var setBtn = document.getElementById("set");
  var txt = document.getElementById("txt");
  var log = document.getElementById("log");

  worker.port.addEventListener("message", function (e) {
    log.innerHTML = e.data;
    console.log("--- 获取到数据 e.data ---", e.data);
  });

  worker.port.start();

  setBtn.addEventListener(
    "click",
    function (e) {worker.port.postMessage(txt.value);
    },
    false
  );

  getBtn.addEventListener(
    "click",
    function (e) {worker.port.postMessage("get");
    },
    false
  );
} catch (error) {console.log("--- error ---", error);
}