浏览器中两个tab页面之间传递数据｜刷题打卡

本文正在参与掘金团队号上线活动，点击 查看大厂春招职位

题目描述：

假设一个应用场景，浏览器同时打开两个同源静态html页面A和B，页面不刷新的前提下，页面A操作传值给到页面B展示。

思路分析：

乍看，项目中我们经常遇到组件间传值，父子组件之间传值，同级组件传值，这些操作都是在同一个页面内执行的。这里是要在两个tab页面里操作，在不刷新页面的情况下数据的传输。

如果是做过app，这种场景经常遇到，主页面多个tab之间传输数据，原生可以通过广播BroadcastReceiver；react-native可以通过DeviceEventEmitter事件监听来实现。

html里localStorage用于本地键值对存储，可以在html里面通过监听storage事件，监听到localStorage的变化，来完成页面之间的数据传输。

代码：

页面A里一个按钮触发点击事件，setItem存储键值对数据。

function test() {
    localStorage.setItem("a", '666')
}

页面B内监听存储事件，监听回调里可以拿到数据，其中字段key对应上面存储的key，newValue则是存储时候设置的值，还有个字段oldValue，是指上一次设置的值。有了newValue，就可以对组件重新赋值。

window.addEventListener('storage',(e) => {
    if(e.key === 'a'){
        let value = e.newValue
    }
})

总结

上面算是很简单一个例子，实际应用场景很复杂，例如项目是用vue搭建的单页应用，tab选项卡是在一个页面里，就可以通过tab选项卡切换的时候，router传参进行数据传递。

这个是简单纯静态的场景，应用场景还可以更复杂些，两个页面在不同电脑上，那就需要websocket长链接来实现。