vue3中实现关闭浏览器清除localStorage内容，刷新不清空

小香菜籽

于 2023-04-07 14:13:59 发布

阅读量3.5k

点赞数 4

文章标签： javascript vue.js 前端

本文链接：https://blog.csdn.net/weixin_46858417/article/details/130011000

版权

在Vue3的App.vue组件中，使用onMounted钩子，结合window.onload、onunload和onbeforeunload事件监听浏览器状态，当浏览器关闭时，通过globalStore设置token和userInfo为空，实现刷新页面不清空localStorage的效果，但实际操作中并未直接清除localStorage项。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue3中实现关闭浏览器清除localStorage内容，刷新不清空

在App.vue中

<script setup lang="ts">
import { onMounted } from "vue";
onMounted(() => {
	window.onload = function () {
		if (!window.sessionStorage["login"]) {
			// 关闭浏览器时清空
			//window.localStorage.removeItem("userInfo"); 或者写这俩
			//window.localStorage.removeItem("token");
			globalStore.setToken("");
			globalStore.setUserInfo("");
		} 
	};
	window.onunload = function () {
		window.sessionStorage["login"] = true;
	};
	window.onbeforeunload = function () {
		window.sessionStorage["login"] = true;
	};
});
</script>