其他分享
首页 > 其他分享> > vue:app.vue中添加监听beforeunload事件,即当浏览器窗口关闭或刷新时删除vuex中的数据

vue:app.vue中添加监听beforeunload事件,即当浏览器窗口关闭或刷新时删除vuex中的数据

作者:互联网

当打开页面时,添加事件监听,即监听beforeunload事件,beforeunload事件在关闭页面时触发。即当关闭页面时,手动删除localStorage中的数据。

app.vue中的代码如下:

<template>
  <div id="app">
    <router-view />
  </div>
</template>

<script>
export default {
  name: "app",
  created() {
    window.addEventListener("`beforeunload`", () => {
      localStorage.removeItem("store");
      localStorage.setItem("store", JSON.stringify(this.$store.state));
    });
  },
  destroyed() {
    localStorage.removeItem("store");
  }
};
</script>

 相关知识点如下:

1、vue实例的生命周期

每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如,需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数,这给了用户在不同阶段添加自己的代码的机会。比如created钩子可以用来在一个实例被创建之后执行代码

也有一些其它的钩子,在实例生命周期的不同阶段被调用,如mounted和destroyed。生命周期钩子的 this 上下文指向调用它的 Vue 实例。

当我们离开这个页面的时候,便会调用destroyed函数

二、beforeunload事件

当窗口,文档及其资源即将卸载时,将触发该事件。

语法

//通用
window.onbeforeunload = function (event) {};
//IE9+
window.addEventListener("beforeunload", function (event) {});

事件触发场景

1)、关闭浏览器窗口

2)、通过地址栏或收藏夹前往其他页面的时候

3)、点击返回,前进,刷新,主页其中一个的时候

4)、点击 一个前往其他页面的url连接的时候

5)、使用document.write() 方法(输出内容)

6)、使用document.open() 打开一个新的空白文档

7)、使用document.close() 方法可关闭一个由open()方法打开的输出流,并显示选定的数据。

8)、当使用window.open() 打开一个页面,并把本页的window的名字传给要打开的页面的时候。

9)、使用window.close() 关闭页面的时候

10)、重新赋予window.location.href的值的时候。

11)、通过input type=”submit”按钮提交一个具有指定action的表单的时候。

12)、使用form.submit() 提交表单的时候

三、localStorage永久存储

localStorage 和 sessionStorage 属性允许在浏览器中存储 key/value 对的数据。

localStorage 用于长久保存整个网站的数据,保存的数据没有过期时间,直到手动去删除。

 

标签:vue,即当,beforeunload,window,实例,localStorage,vuex,页面
来源: https://www.cnblogs.com/zwh0910/p/15639011.html