9月20日总结

浏览器标签页之间通信的实现
使用场景

​ 前端开发过程中，总是避免不了要进行前端标签页之间的通信，最经典的例子莫过于音乐播放网站中，当第一次点击播放列表中的歌曲时，它会打开一个新的标签页进行播放，而当在列表中再次点击歌曲播放时，并不会再多打开一个标签页，而是会在刚才新打开的标签页上播放歌曲。
方式方法

这里跳转新页面均使用window.open[1]方法，这里稍微说下window.open方法的参数

url（可选）
一个字符串，表示要加载的资源的 URL 或路径。如果指定空字符串（""）或省略此参数，则会在目标浏览上下文中打开一个空白页。

target（可选）
一个不含空格的字符串，用于指定加载资源的浏览上下文的名称。如果该名称无法识别现有的上下文，则会创建一个新的上下文，并赋予指定的名称。还可以使用特殊的 target 关键字：_self、_blank、_parent 和 _top。

该名称可用作<a>或<form>元素的target属性。

windowFeatures（可选）
一个字符串，包含以逗号分隔的窗口特性列表，形式为 name=value，布尔特性则仅为 name。这些特性包括窗口的默认大小和位置、是否打开最小弹出窗口等选项。

在下面的例子中采用audio,作为浏览上下文的名称，让他从始至终只创建一个新的标签页

1.使用路由上的query传参

list.html

const broadCastChannel = new BroadcastChannel('audio')
function showAudio(){
//方式一:通过query，缺点会刷新已打开的页面，但并没有同源策略影响
window.open('/audio.html?name=张三&id=555','audio')

}

audio.html

const app = document.getElementById('app')
const query = new URLSearchParams(window.location.href.split('?')[1])
app.innerText = query.get('name')

优点：每次打开，audio页面都会变为当前活动标签页

缺点：

每次打开，audio页面都会被刷新，重新加载
如果新打开的浏览上下文不共享相同的源[2]，则打开脚本将无法与浏览上下文的内容进行交互（读取或写入）。

2.使用localStroage监听