VUE 浏览器关闭时清空localStorage-优快云博客

本文主要介绍在Vue项目中，为了解决页面刷新时vuex数据丢失问题，如何利用localStorage存储数据，并在浏览器关闭时自动清空localStorage，确保数据安全。通过在App.vue文件中设置实现关闭浏览器时的清空操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1. 概述

1.1 说明

vue项目中，为了解决页面刷新时vuex数据丢失问题，使用localStorage进行存储对应的vuex数据(判断对应localStorage是否为空，不为空则为vuex中数据进行赋值)，而localStorage的存储时间为长久存储，故为了数据安全则需在浏览器关闭时进行清空存储。

1.2 条件与思路

1.vue项目对应的单个网页刷新数据不丢失 --- 使用sessionStorage进行存储并解决页面刷新vuex数据丢失问题

2.可多个标签页打开数据共享 --- 使用localStorage进行存储共享

3.关闭浏览器后再次进入浏览器数据重置(如重新登录) --- 关闭浏览器时清空localStorage

2. 实例

2.1 为localStorage与sessionStorage赋值

　　1.登录成功后进行赋值操作(调用vuex)

this.$store.commit(types.LOGIN, tokenInfo);

　　2.路由守卫时进行数据判断与赋值操作

router.beforeEach((to, from, next) => {
  let token=store.getters.token;
  if (!token){
    token=localStorage.getItem("token");
    if(!token){
        token=sessionStorage.getItem("token");
    }
    if (token){
      store.commit(types.LOGIN,token);
    }
  }
    // 判断token是否存在并进行跳转
});

　　3.vuex中的操作

mutations: {
        [types.LOGIN]: (state, data) => {
            localStorage.token = data;
            sessionStorage.token = data;
            state.token = data;
        }
}

2.2 App.vue文件中统一设置关闭浏览器清空localStorage

    mounted: function () {
         //此方法刷新页面时也会执行
         window.addEventListener('beforeunload',()=>{
            localStorage.removeItem('token');
        });
    },

转载于:https://www.cnblogs.com/ajuan/p/10070908.html