Reduxvuex这是单页应用中的跨页状态管理多页应用跨页数据传输本题主要考察多页应用中tab间的数据交互技术方法。实现多页面通信主要采用浏览器数据存储方式：浏览器数据存储方式主要通过本地存储方式解决，即调用localStorage、Cookie等本地存储方式。Server模式：主要是利用websocket技术，让多个tabs监听serverpush事件，获取其他tabs发送的数据。浏览器存储：第一种：localStorage：使用localStorage.setItem(key,value)在标签页中添加（修改，删除）内容；在另一个标签页中监听存储事件。可以获取localstorge中存储的值，实现不同tab之间的通信。//添加localStorage.setItem(key,value)//删除localStorage.removeItem(key,value)//添加监听存储变化window.onload=function(){window.addEventListener('storage',function(event){//event事件对象包含domainnewValueoldValuekeyconsole.log(event.key+'='+event.newValue);})}第二种：cookie+setInterval：cookie中存放要传输的信息，每一定通过随时读取cookie信息，随时获取要传递的信息。在A页面，将需要传递的消息存储在cookie中，在B页面设置setInterval，每隔一定的时间间隔读取cookie的值。(继续询问cookie)//setcookiedocument.cookie="name="+name;//getcookiefunctiongetCookie(key){const_string='{"';_string+=document.cookie.replace(/;\s+/gim,'","').replace(/=/gim,'":"');_string+='"}'[key];returnJSON.parse(_string);}先监听服务器事件类型：websocket通信WebSocket是全双工（full-duplex）通信，自然可以实现多个tab之间的通信（服务器可以主动向浏览器发送数据；浏览器也可以主动向服务器发送数据）。WebSocket是HTML5中的一个新协议，其目的是在浏览器和服务器之间建立一个不受限制的双向通信通道。例如，服务器可以随时向浏览器发送消息。为什么传统的HTTP协议不能实现WebSocket实现的功能呢？这是因为HTTP协议是一种请求-响应协议。请求必须先由浏览器发送给服务器，服务器才能响应请求，然后将数据发送给浏览器。.也有人说HTTP协议其实是可以实现的，比如polling或者Comet。这种机制的缺点一是实时性不够，二是频繁的请求会给服务器带来很大的压力。Comet本质上也是轮询，但是如果没有消息，服务器会等待一段时间，等有消息再回复。这种机制暂时解决了实时性问题，但也带来了新的问题：多线程运行的服务器会在大部分时间让大部分线程处于挂起状态，极大地浪费了服务器资源。另外，当一个HTTP连接长时间没有数据传输时，链路上的任何网关都可能关闭连接，而网关是我们无法控制的，这就要求Comet连接必须周期性的发送一些ping数据来表明connectionisnormalWork”。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为URL。示例：浏览器端代码//创建WebSocketconnection.constsocket=newWebsocket("ws://localhost:8080");//Connectionopensocket.addEventListener("open",function(event){socket.send("HelloServer!");});//监听消息socket.addEventListener("message",function(event){console.log("Messagefromserver",event.data);});第二种：html5浏览SharedWorker的新特性可以直接使用newWorker()创建。这种webworker是当前页面独有的。然后是共享工作者（SharedWorker），可以在多个tabs和iframe中使用。SharedWorker可以被多个窗口使用，但是必须保证这些选项卡是同源的（相同的协议、主机和端口号）。首先，创建一个新文件worker.js。具体代码如下：.//shareWorker会用到js文件，不需要打包到项目中，放在服务器上即可letdata="";letonconnect=function(event){letport=事件.端口[0]；port.onmessage=function(e){if(e.data==="get"){port.postMessage(data);}else{data=e.data;}};};示例代码：try{varworker=newSharedWorker("worker.js");vargetBtn=document.getElementById("get");varsetBtn=document.getElementById("set");vartxt=document.getElementById("txt");.port.addEventListener("message",function(e){log.innerHTML=e.data;console.log("---获取数据e.data---",e.data);});工人.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);}
