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

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