vue如何实现2个新标签之间的信息共享

两个新标签页之间进行数据传递的方式有多种,以下是一些常见的方法:

1. **localStorage**: 这是一个Web API,允许您在浏览器中存储键值对。这些数据会持久保存,即使浏览器关闭或刷新也不会丢失。

2. **cookie + setInterval**: 通过设置和读取cookie来实现数据的传递。这种方法通常与定时器结合使用,以定期检查cookie是否有更新。

3. **WebSocket**: 这是一种在单个TCP连接上进行全双工通信的协议。它适用于需要实时双向通信的场景。

4. **Shared Worker**: 这是一种在后台线程中运行JavaScript的机制,不会影响页面的性能。它可以用来处理复杂的计算或与远程服务器通信。

5. **postMessage**: 这是HTML5的一个特性,允许来自不同源的脚本通信。它可以实现简单的跨域通信。

6. **中介者模式**: 本质上是通过找一个中介者,让标签页和中介者进行通信,然后让这个中介者来进行消息的转发。

7. **window.open() 和子页面postMessage**: 父页面使用window.open()打开一个新窗口或标签页,并使用postMessage()方法与其通信。

在选择适当的方法时,需要考虑数据的性质(如是否需要长期存储、是否需要实时更新等)以及浏览器兼容性等因素。

sessionStorage 怎样才能处理2个新标签页的资源共享?

sessionStorage是一种针对一个标签页的数据存储方式,生命周期只在当前标签页有效。这意味着,如果在同一个浏览器中打开了多个标签页,且都访问同一个域名,每个标签页都会有自己独立的sessionStorage,它们之间是不共享的。

然而,有一些特殊情况下可以实现跨标签页的sessionStorage共享。例如,通过window.open()方法打开的新标签页可以共享原标签页中的sessionStorage。另外,一些新版的Chrome和Firefox浏览器在通过a标签 _blank方式打开的新标签页中也能实现sessionStorage的共享。

不过需要注意的是,这种共享行为可能会受到浏览器版本和具体情况的影响。因此,如果你需要在多个标签页之间安全、可靠地传递数据,可能需要考虑使用其他的技术方案,如localStorage、cookie或WebSocket等。
实现方法:
 sessionStorage.setItem('MYAPPROVAL_DATA', JSON.stringify(data)) // 存数据
JSON.parse(sessionStorage.getItem('MYAPPROVAL_DATA')) // 取数据

你可能感兴趣的:(vue.js,前端,javascript)