方案一 :针对浏览器刷新或关闭后,清除localStorage缓存,app.vue文件mounted编写下方代码
mounted() {
window.addEventListener('beforeunload', function(event) {
// 在窗口关闭之前执行的操作
// 可以在这里添加清除Cookie、保存数据等操作
event.preventDefault(); // 阻止默认的关闭行为
event.returnValue = ''; // Chrome需要设置returnValue属性
});
},
方案二:只针对浏览器关闭,清除localStorage本地缓存,配合cookie实现,代码很简单:
( 使用cookie生命周期机制,浏览器关闭后,cookie缓存消失,通过cookie判断浏览器是否关闭,如果是刷新,cookie不变,不做任何操作 )
//第一步:项目封装本地存储的地方,添加cookie存储
const LocalStorage= {
save(key, value) { localStorage.setItem(key, JSON.stringify(value)) },
get(key, defaultValue = {}) {
const items = localStorage.getItem(key)
if (items) {
return JSON.parse(items)
} else {
return defaultValue
}
},
remove(key) { localStorage.removeItem(key) },
clear() { localStorage.clear() },
/**------------------以下代码cookie存储与取值-----------*/
setCookie(key,value){
document.cookie=`${key}=${value}`
},
getCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';'); //把cookie分割成组
for (var i = 0; i < ca.length; i++) {
var c = ca[i]; //取得字符串
while (c.charAt(0) == ' ') { //判断一下字符串有没有前导空格
c = c.substring(1, c.length); //有的话,从第二位开始取
}
if (c.indexOf(nameEQ) == 0) { //如果含有我们要的name
return unescape(c.substring(nameEQ.length, c.length)); //解码并截取我们要值
}
}
return false;
},
}
export default LocalStorage
//第二步:登录完成后设置cookie,使用后台传回token值进行存储
import LocalStorage from "@/utils/localstorage"; //登录页引入
//登录方法,请求成功后,可以存储tokenId
login(){
LocalStorage .setCookie('ACCESS_TOKEN',data.tokenId)
}
//第三步:app.vue中进行判断
import LocalStorage from "@/utils/localstorage";
mounted() {
if (LocalStorage .getCookie("ACCESS_TOKEN") === false) {
/** 这里时页面关闭后,要进行的操作*/
LocalStorage .clear()
} else {
return
}
},
注意:destroyed生命周期不能使用该方法 , 必须在mounted生命周期中,使用进行判断