vue2浏览器关闭清除localStorage本地缓存

2023-07-01 06:43| 来源: 网络整理| 查看: 265

方案一：针对浏览器刷新或关闭后，清除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生命周期中，使用进行判断

【本文地址】

公司简介

联系我们