javascript - js 有什么优雅的办法实现在同时打开的两个标签页间相互通信？

问题描述

举了例子：

我同时打开了a和b两个页面，我聚焦在a上，并进行一些操作，让a页面上的js处理我的操作并将数据发送到旁边的b页面。此时b页面就能在不刷新、不经过服务器的情况下接收到这些数据并作出反馈。类似于在百度音乐pc网页版听歌的时候，如果已经打开了百度音乐盒页面和列表页，我在列表页点一首歌曲的“播放”按钮时，旁边的音乐盒页面就可以自动开始播放那首音乐，而不需要打开新页面。

总觉得用cookie什么的干这事有些鸡肋。

问题解答

这是一道阿里的面试题，方法很多。利用localstorage的storage事件可以通讯；shadredworker也可以解决；还有就是用websocket。

如果你能控制ab的页面甚至决定URL: sharedworker / localstorage / sessionstorage 都可以用

<ul><li><a href='https://www.haobala.com/song-1' target='player'>song-1</a></li><li><a href='https://www.haobala.com/song-2' target='player'>song-2</a></li><li><a href='https://www.haobala.com/song-3' target='player'>song-3</a></li></ul>

属性target='framename'表示在指定的框架(页面)中打开链接.可以实现:点击添加商品到购物车时,如果购物车页面已经打开,则只刷新该页面,而不是打开新的购物车页面.点击播放歌曲时,如果播放器页面已经打开,则只刷新该页面,而不是打开新的播放器页面.

提示下思路：浏览器同时打开两个同域名的网页，他们的localStorage是共享的，不仅如此，他们之间的localStorage值改变也是可以监听的。同域的a和b两个页面，a页面发生localStorage.set(’abc’, 123)，b页面可以通过如下方式监听变化：

window.addEventListener('storage', function(e){ console.log(’key:’, e.key); // 'abc' console.log(’oldValue:’, e.oldValue); // null console.log(’newValue:’, e.newValue); // 123});