方案一 :针对浏览器刷新或关闭后,清除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 个月前
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐