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)

// 设置 cookiedocument.cookie = "name=" + name;// 获取 cookiefunction 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 openedsocket.addEventListener("open", function (event) {  socket.send("Hello Server!");});// Listen for messagessocket.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);}