vue监听sessionStorage变化
1、项目需求
最近遇到项目，是在pc后台系统主界面，点击一个按钮，然后弹窗弹出一个新的视频页面，如图：
（本来设计是弹窗直接在显示器2上面弹出，可惜臣妾做不到啊/(ㄒoㄒ)/~~，有会的大佬指点一下），所以只能做成打开一个新的浏览器页面然后拖拽到显示器2上，这里面还有个需求就是每次点击按钮会传一个值过去，然后视频页面要根据传过来的值请求接口，更新页面视频，emmm。。。。。。我也是百度了好几种方法，最后还是选择监听session的变化来处理（可能不是最好的方案，但是功能实现了，哈哈哈。。。。。需要的可以参考一下）
2、使用工具
因为是实时获取视频播放流的，所以需要用到jsmpeg，直接使用jsmpeg.js文件（资源内有）
//视频展示页面
<canvas id="video-canvas"></canvas>
// template里面的容器一定是canvas，不能是div，不然会报错
//直接引入js文件
import JSMpeg from '../utils/jsmpeg'
methods: {
getPath(){
const data = {
user:window.sessionStorage.getItem('userName'),
laneHex:window.sessionStorage.getItem('enTollStationHex')
}
this.$API.getPlayHttp(data).then(res=>{
const result = res.result || {
}
if(!!result.videoUrl){
//接口请求获取到的result.videoUrl是ws地址的
var canvas = document.getElementById("video-canvas");
this.player = new JSMpeg.Player(result.videoUrl, {
canvas: canvas,autoplay: true });
}else{
this.$message.error('暂无视频数据')
}
}).catch(err=>{
console.log(err)
this.$message.error(err)
})
}
}
mounted() {
window.addEventListener('setItem', (e) => {
if(e.newValue != this.oldData.laneHex){
this.$API.getStopHttp(this.oldData)//终止视频传输
this.player.destroy()//清除上一次视频
clearInterval(this.timer);
//项目中视频流是30秒请求一次的，换地址的话要终止前面视频流的定时器
this.getPath()
}
});
this.getPath()
},
如果不使用destroy视频切换的时候就会出现两个视频来回播放
3、session传值
enTollStationHex这个值是点击主页面，弹出新的页面后set进session内的，
主页面按钮事件，打开新的弹窗并像新的弹窗sessionStorage set值
//主页面
openNewWind(){
let {
href}= this.$router.resolve({
path: "laneMonitoring", // 这里写的是要跳转的路由地址
});
this.newWindow = window.open(href,'newWindow','_blank');
this.$addStorageEvent('enTollStationHex',this.newSpecialTreatment.tollVehicle.laneHex,this.newWindow)
}
main.js配置
之前sessionStorage set值发现新的弹窗如果不关闭，再次点击按钮的时候值就set不进去了，所以main.js里面用newWindow.sessionStorage去set值，这样新弹出的页面session里面的值只要点击主页面的按钮就会实时set值进去
/**
* @param { string } key 键
* @param { string } data 要存储的数据
* @param { string } newWindow打开新页面的window值
* @returns
*/
Vue.prototype.$addStorageEvent = function (key, data,newWindow) {
// 创建一个StorageEvent事件
var newStorageEvent = document.createEvent('StorageEvent');
const storage = {
setItem: function (k, val) {
newWindow.sessionStorage.setItem(k, val);
// 初始化创建的事件
newStorageEvent.initStorageEvent('setItem', false, false, k, null, val, null, null);
// 派发对象
newWindow.dispatchEvent(newStorageEvent);
}
}
return storage.setItem(key, data);
}