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

 轉自：https://www.cnblogs.com/ajuan/p/10070908.html