vue-监听标签页关闭

文章来源

1. 背景

由于业务场景原因，我在关闭浏览器窗口时要清除localStorage中的内容，此时我在beforeDestory生命周期中进行操作，发现并没有执行，查看一篇文章找到了原因

2. 原因

beforeDestroy只能监听页面间的跳转，无法监听到页面刷新和关闭标签页，所以要借助一下onbeforeunload事件。

• 页面加载时只执行 onload 事件。
• 页面关闭时，先 onbeforeunload 事件，再 onunload 事件。
• 页面刷新时先执行 onbeforeunload事件，然后 onunload 事件，最后 onload 事件。

根据我们的业务场景，可以在onbeforeunload时执行我们的清除方法。

3. 使用

我们可以在created/mounted中增加一个事件监听器。在destroyed中销毁这个事件监听器。
使用代码如下：

  mounted() {
    window.addEventListener('beforeunload', this.solveBeforeUnload)
	....
  }
  destroyed() {
    window.removeEventListener('beforeunload', this.solveBeforeUnload)
  }
  solveBeforeUnload() {
    this.clearTimeStorage()
  }

测试后发现可以满足我当下的需求。

总结用法，希望可以帮助到你，
我是Ably，你无须超越谁，只要超越昨天的自己就好~