vue2浏览器关闭清除localStorage本地缓存
vue
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
项目地址:https://gitcode.com/gh_mirrors/vu/vue
免费下载资源
·
方案一 :针对浏览器刷新或关闭后,清除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生命周期中,使用进行判断
GitHub 加速计划 / vu / vue
207.54 K
33.66 K
下载
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:2 个月前 )
73486cb5
* chore: fix link broken
Signed-off-by: snoppy <michaleli@foxmail.com>
* Update packages/template-compiler/README.md [skip ci]
---------
Signed-off-by: snoppy <michaleli@foxmail.com>
Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 4 个月前
e428d891
Updated Browser Compatibility reference. The previous currently returns HTTP 404. 5 个月前
更多推荐
已为社区贡献3条内容
所有评论(0)