VUE 浏览器关闭时清空localStorage

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');

        });

    },

秒客网