vue案例 - vuex+sessionstorage解決vue項目刷新后頁面空白/數據丟失

第一部分 

SessionStorage

首先查看sessionStorage的地方在控制台的 Application > Storage > Session Storage這里：

 

根據sessionstorage的特性，做一下各個方法的封裝：

const ls = window.sessionStorage;
export
default {
    getItem(key) {
        try {
            return JSON.parse(ls.getItem(key));
        } catch (err) {
            return null;
        }
    },
    setItem(key, val) {
        ls.setItem(key, JSON.stringify(val));
    },
    clear() {
        ls.clear();
    },
    keys(index) {
        return ls.key(index);
    },
    removeItem(key) {
        ls.removeItem(key);
    }
}

封裝代碼解析：

  首先將window.sessionStorage/localStorage賦值給簡短的變量名ls

  然后在js文件中直接export default拋出一個對象，對象內包含五個方法：
　　getItem用來封裝數據的獲取，其參數是key名
　　setItem用來封裝設置數據，其參數是key名
　　　　因為sessionStorage存儲的數據只能是字符串，對於常用的對象和數組是存儲不了的。
　　　　所以在getItem這里需要JSON.parse來將JSON 字符串轉換（“格式化”）為對象、
　　　　在setItem里需要JSON.stringify處理來將對象或者數組轉換（“壓縮”）為一個 JSON字符串
　　keys里邊封裝了獲取指定下標對應數據的key名，所以參數是index值
　　removeItem負責移除某一個指定key的對應數據
　　clear負責清楚當前所有的sessionStorage數據

 

材料准備好之后，在需要使用的地方引用

import ls from '../assets/js/ls.js'

 

然后就是使用了，

一、setItme：

ls.setItem('test', true);
ls.setItem('test2', '字符串');
let test3 = {
    name: 'a',
    sex: 'b',
    age: 24
}
ls.setItem('test3', test3);

存入效果如圖：

 

二、getItem應用

console.log(ls.getItem('test3'));

* 記得鍵名要加引號

 

 三、sessionStorage.key（）方法

console.log(ls.keys(0));
console.log(ls.keys(2));
console.log(ls.keys(3));

控制台打印如下：

 

 四、removeItem

ls.removeItem('test2');

* 鍵名記得加引號.

可以看到，test2被移除了：

 

五、 clear

ls.clear()

 這下所有的都被清除了：

 

soeasy,思考一個問題，為什么sessionstorage刷新頁面不會清空數據呢？

 

 

第二部分

接下來清楚了五個方法各自的用法，來說說我的項目邏輯

vuex的state中，定義這個狀態：ActiveProgressEnum
這個是用戶參加活動的進程值，只要按流程走，他會一直變化，但是若初始化進來時，他被我自己預先設定成一個不在后端定義范圍內的另一個值，比如任性的100000.
vuex里邊數據的一個特點時，刷新他就會回歸初始化。所以，意味着用戶進入頁面或者刷新頁面，這個值就會變成我自己設定的100000.那么第一個限制條件就完成了。

if(state.init.ActiveProgressEnum === 100000){ 
}

如前面所說，條件成立會有兩種場景：用戶進入頁面 || 刷新頁面。
所以這里還不完全能利用這個。此時我還需要一個狀態join，讓我區分用戶不是在初始化狀態。這樣，如果這兩個條件同時成立，那就能斷定他是刷新了。
那么這個狀態值需要在一開始沒有，頁面初始化后才存在，且頁面刷新不丟失。
什么數據這么神通廣大？！那就是sessionstorage設置的數據。
所以，要在判斷條件內部添加一句，獲取這個狀態值join。

let join = ls.getItem('RYHB_J');//Join縮寫，用於判斷用戶是否是初次加載頁面

 

並且根據業務需要獲取一下關鍵信息

let newTeamID = ls.getItem('RYHB_T');//TeamID縮寫，需要保留的重要信息

 

然后開始判斷條件是否同時成立：
但是這里有一點，需要利用js的同步邏輯，這段判斷的代碼要提前放到最頂部，即初始化數據沒有設定之前：

因為如果數據設定以后，每次初始化進入頁面后，開始這段判斷時，該值就已經存在，也會被檢測到，場景就會被當作刷新的情況。

if (join && newTeamID && newTeamID > 0) {
    // 條件成立：頁面刷新的情況
    ls.removeItem('RYHB_J');
    window.location.href = 'https://.../index.html?TeamID=' + newTeamID;
}

 

還有值得注意的是：

ls.removeItem('RYHB_J');

作用：刷新沒有清除session的數據，如果條件成立的話，是需要重定向頁面，讓頁面重新按照之前的步驟再走一邊流程的，這時應該清除或者重置一下，不然頁面一進來數據還存在，這里條件就會成立，會變成死循環，展示上就是頁面一直跳轉一直刷新。

直接清除join這樣條件就不成立了且還方便操作。

而在判斷的下邊，調用ajax獲取數據，並把響應結果中的關鍵信息(本案例中的newTeamID)一並寄托給sessionStorage：

$axios.get(state.ownSet.dataUrl + 'JoinInActive')
    .then((response) = > {
    if (response && response.data && response.data.result === 1) {
        let data = response.data.RetValue;
        ls.setItem('RYHB_J', true);
        ls.setItem('RYHB_T', data.TeamID);
    } else {}
})
    .
catch ((err) = > {});

這樣當用戶刷新的時候，會觸發頂部的那段判斷代碼。但是初始化進入的時候不會觸發，這就做了刷新的時候重新獲取數據

 

完整的用於判斷是否是刷新場景的代碼

if (state.init.ActiveProgressEnum === 100000) {
    let newTeamID = ls.getItem('RYHB_T'); //TeamID縮寫，需要保留的重要信息
    let join = ls.getItem('RYHB_J'); //Join縮寫，用於判斷用戶是否是初次加載頁面
    if (join && newTeamID && newTeamID > 0) {
        // 頁面刷新的情況
        // 刷新沒有清除session的數據，這時應該清除或者重置一下，不然是死循環，直接清除這樣方便操作。
        ls.removeItem('RYHB_J');
        window.location.href = 'https://.../index.html?TeamID=' + newTeamID;
    }
}

 

這樣解決了刷新后頁面空白的問題，重定向重新請求數據
但是如果為了解決部分數據丟失的問題，也可以直接將數據實現存在sessionstorage內，然后判斷刷新的話直接提取數據即可。不用再重定向重新請求數據這么麻煩了

 

 

 

 

個人學習理解和總結，很多不足還請指正~