要点：

1. 数据存储
2. 两屏之间的通信

存储

• Cookie 受同源策略限制，支持多标签页数据共享，大小4KB左右，视浏览器而定
• LocalStorage 受同源策略限制，支持多标签页数据共享，存储数据量大概几M，视浏览器而定
• SessionStorage 受同源策略限制，单标签页数据，存储数据量大概几M，视浏览器而定
• IndexedDB 受同源策略限制，能够存储较大的数据量

通信

• websoket 需要一个服务端做中转，可跨源通信
• window.postMessage() 一个窗口需要获得另一个窗口的引用，可跨源通信
• Web Worker 没能实现多标签页数据共享，不能通过上述存储方式共享数据
• window.onstorage 通过LocalStorage存储实现共享

结论

1. websoket能实现双屏数据共享，从而实现标题的效果，不过因为要写个服务端中转，暂时不考虑此方案。
2. Web Worker 没能实现多标签页数据共享。
3. window.postMessage() 可在两窗口之间通信，代码相对简单，不过体验不太好。
4. 相对来讲，在数据量不大的情况下，window.onstorage 和LocalStorage来实现分屏异显更好点

代码

结论3：

//页面1
页面1
发送消息

//页面2
页面2

结论4：

//页面1
页面1

//页面2
页面2

最后， 除了方案一，三和四只能在同一浏览器中运行。方案一的实现流程可参阅这篇博客

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！