Vue.js 如何仅在关闭浏览器（VueJs）后清除localeStorage？

问题是：“如何仅在关闭浏览器（而不是关闭浏览器选项卡并重新加载页面）后清除localeStorage”。这必须在Vue组件中实现。 找到以下解决方案（）：

---

但是我不知道如何正确地调用这些侦听器以及在何处调用这些侦听器。

您只需在

main.js

文件或

App.vue

文件中注册侦听器即可

main.js

从“Vue”导入Vue；
从“/App.vue”导入应用程序；
Vue.config.productionTip=false；
新Vue({
beforeMount（）{
window.addEventListener（“加载”，this.onLoad）；
window.addEventListener（“beforeunload”，this.onUnload）；
},
在…之前{
window.removeEventListener（“加载”，this.onLoad）；
removeEventListener（“beforeunload”，this.onUnload）；
},
方法：{
加载（事件）{
setItem（“isMySessionActive”，true）；
},
onUnload（事件）{
setItem（“isMySessionActive”，false）；
}
},
渲染：（h）=>h（应用程序）
}).$mount（“#app”）；

App.vue

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png" width="25%">
    <HelloWorld msg="Hello World!"/>
  </div>
</template>

<script>
import HelloWorld from "./components/HelloWorld";

export default {
  name: "App",
  components: {
    HelloWorld
  },
  beforeMount() {
    window.addEventListener("load", this.onLoad);
    window.addEventListener("beforeunload", this.onUnload);
  },
  beforeDestroy() {
    window.removeEventListener("load", this.onLoad);
    window.removeEventListener("beforeunload", this.onUnload);
  },
  methods: {
    onLoad(event) {
      window.localStorage.setItem("isMySessionActive", true);
    },
    onUnload(event) {
      window.localStorage.setItem("isMySessionActive", false);
    }
  }
};
</script>

<style>
#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

从“/components/HelloWorld”导入HelloWorld；
导出默认值{
名称：“应用程序”，
组成部分：{
你好世界
},
beforeMount（）{
window.addEventListener（“加载”，this.onLoad）；
window.addEventListener（“beforeunload”，this.onUnload）；
},
在…之前{
window.removeEventListener（“加载”，this.onLoad）；
removeEventListener（“beforeunload”，this.onUnload）；
},
方法：{
加载（事件）{
setItem（“isMySessionActive”，true）；
},
onUnload（事件）{
setItem（“isMySessionActive”，false）；
}
}
};
#应用程序{
字体系列：“Avenir”，Helvetica，Arial，无衬线；
-webkit字体平滑：抗锯齿；
-moz osx字体平滑：灰度；
文本对齐：居中；
颜色：#2c3e50；
边缘顶部：60像素；
}

感谢您的回答，我将很快添加（无论它是否有效）

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png" width="25%">
    <HelloWorld msg="Hello World!"/>
  </div>
</template>

<script>
import HelloWorld from "./components/HelloWorld";

export default {
  name: "App",
  components: {
    HelloWorld
  },
  beforeMount() {
    window.addEventListener("load", this.onLoad);
    window.addEventListener("beforeunload", this.onUnload);
  },
  beforeDestroy() {
    window.removeEventListener("load", this.onLoad);
    window.removeEventListener("beforeunload", this.onUnload);
  },
  methods: {
    onLoad(event) {
      window.localStorage.setItem("isMySessionActive", true);
    },
    onUnload(event) {
      window.localStorage.setItem("isMySessionActive", false);
    }
  }
};
</script>

<style>
#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>