美文网首页前端
vue 跨页面通信怎么弄

vue 跨页面通信怎么弄

作者: townYouth | 来源:发表于2021-08-06 22:37 被阅读0次

在vue的项目里面,组件之间相互通信的方式有很多,比如props/$emit、$on/$emit、vuex以及利用ref通信等方式。跨组件有这么多的通信方式可以选择,但是当需求要求我们跨页面通信怎么办呢?

由于每个页面都是一个独立的vue实例,页面与页面之间不存在数据上的沟通,所以,从vue框架上暂时行不通了。然后想到可以利用页面缓存的方式来进行通信。

在Web Storage中有两种储存数据的方式,分别是sessionStorage和localStorage,他们之间的区别在于生命周期的不同以及作用域(同源条件下)的不同。sessionStorage仅在当前会话中有效,关闭页面或者浏览器后数据会被自动清除,其作用域仅限于当前页面,不能跨tab页面访问。localStorage的生命周期是永久有效,只要是不主动删除,数据会一直被存储下来,其作用域也可以跨同源的页面访问。

有了localStorage跨页面的作用域,就可以做到页面之间的通信了,这下只要能解决如何监听其存储数据的变化就能实现了。于是想到了一个比较粗暴的方式——利用定时器:在一定间隔时间内获取localStorage中的数据并更新到获取数据的页面中去,这样便实现了数据的监听。但这样未免也太耗费性能了,为了少耗费性能而拉长时间间隔,但数据又总是更新不及时。这样这个方式就被待定了。

这时了解到有一个专门用来监听本地存储的数据变化的事件为Storage事件:Web Storage API内建了一套事件通知机制,当存储区域的内容发生改变(包括增加、修改、删除数据)时,就会自动触发 storage 事件,并把它发送给所有感兴趣的监听者。所有支持 localStorage 的浏览器都支持 storage 事件,包括 IE8。但IE 8不支持 W3C 标准的 addEventListener。因此,为了监听 storage 事件,还需要检测浏览器支持哪种事件机制:

if (window.addEventListener) {
    window.addEventListener("storage", handleStorage, false);
} else {
    window.attachEvent("onstorage", handleStorage);
}

有了这个storage事件,跨页面通信就变得很容易了:

<!--发送数据页面-->
<template>
  <div class="home">
    <h1>发送数据页面</h1>
    <input type="text" @input="input" v-model="value"/>
  </div>
</template>

<script>
export default {
  name: 'Home',
  data () {
    return {
      value: 'test'
    }
  },
  methods: {
    input () {
      localStorage.setItem("test", this.value)
    }
  },
  created () {
    localStorage.setItem("test", this.value)
  }
}
</script>
<!--接收数据页面-->
<template>
  <div class="about">
    <h1>接收数据页面</h1>
    获取到的值:{{value}}
  </div>
</template>

<script>
  export default {
    name: 'about',
    data () {
      return {
        value: ''
      }
    },
    created () {
      window.addEventListener("storage", e => {
        if (e.key === "test") {
          this.value = e.newValue
        }
      })
    }
  }
</script>

相关文章

  • vue 跨页面通信怎么弄

    在vue的项目里面,组件之间相互通信的方式有很多,比如props/$emit、$on/$emit、vuex以及利用...

  • 监听localStorage中值的变化实现跨页面通信

    本次分享一个之前困扰很久的,跨页面之间的通信方式。 以前跨页面通信,就拿我们之前vue项目中多页面为例,每个页面都...

  • 前端跨页面通信

    跨页面通信主要分两大类 同源页面间的跨页面通信 非同源页面间的跨页面通信 同源页面间的跨页面通信 1.BroadC...

  • 同源跨页面通信

    同源跨页面通信小记 BroadcastChannel The BroadcastChannel interface...

  • 前端跨tab页通信

    一、同源页面间的跨页面通信 BroadCast Channel Service WorkerService Wor...

  • kbone 高级 - 跨页面通信和跨页面数据共享

    在 kbone 中,每个页面拥有独立的 window 对象,页面与页面间是相互隔离的,为此需要一个跨页面通信和跨页...

  • 页面内跨域解决方案

    除了浏览器请求跨域之外,页面之间也会有跨域需求,例如使用 iframe 时父子页面之间进行通信。postMessa...

  • Vue组件通信

    总体来说,Vue中组件之间的通信场景如下图: 可以将其分为父子组件通信、兄弟组件通信、跨级组件通信。 1. 自定义...

  • js—iframe父子页面间通信

    iframe子页面与父页面通信根据iframe中src属性是同域链接还是跨域链接,通信方式也不同。 一、同域下父子...

  • JS之iframe子页面与父页面通信

    iframe子页面与父页面通信根据iframe中src属性是同域链接还是跨域链接,通信方式也不同。 一、同域下父子...

网友评论

    本文标题:vue 跨页面通信怎么弄

    本文链接:https://www.haomeiwen.com/subject/cvoivltx.html