vuex頁面重新整理後資料丟失

jrue發表於2019-02-16
Vue

1. 原因

  • （1）js程式碼是執行在記憶體中的，程式碼執行時的所有變數、函式都是儲存在記憶體中。
    （2）重新整理頁面，以前申請的記憶體被釋放，重新載入指令碼程式碼，變數要重新賦值。
    （3）要想重新整理後資料不丟失就必須把資料儲存在外部，例如：Local Storage、Session Storage、Index DB等。這些都是瀏覽器提供的API，讓你可以將資料儲存在硬碟上，做持久化儲存。

2. HTML5提供的2種客戶端儲存資料的新方法

  • localStorage儲存資料：
    （1）儲存的資料是永久性的，永不過期；
    （2）作用域是限定在文件源級別的。同源的文件間共享同樣的localStorage資料（不論該源的指令碼是否真正的訪問localStorage）。
    他們可以互相讀取對方的資料，甚至可以覆蓋對方的資料。但是，非同源的文件間互相都不能讀取或者覆蓋對方的資料。
    （即使他們執行的指令碼是來自同一臺第三方的伺服器也不行）。

  • sessionStorage儲存資料：
    （1）會話，當瀏覽器關閉時會話結束並清除資料，有時間期限；
    （2）儲存資料的有效期和儲存資料的指令碼所在的最頂層的視窗或者是瀏覽器標籤頁是一樣的，一旦視窗或者標籤頁被永久關閉了，
    那麼所有通過sessionStorage儲存的資料也都被刪除了。

3.具體實現（登入後儲存狀態，退出後移除狀態）

// vuex mutations
const mutations = {
    setToken(state, token) {
        // 儲存使用者認證Token
        sessionStorage.setItem(`token`, token);
        state.token = token;
    },
    setUser(state, user) {
        // 儲存使用者資訊
        sessionStorage.setItem(`user`, JSON.stringify(user));
        state.user = user;
    },
    // 登出登入，清除token
    logout(state) {
        state.token = null;
        state.user = null;
        sessionStorage.removeItem(`token`);
        sessionStorage.removeItem(`user`);
    }
};

// vuex getters
const getters = {
    getToken(state){
        if(state.token === null){
            state.token = sessionStorage.getItem(`token`)
        }
        return state.token;
    },
    // 獲取當前使用者登入資訊
    getUser(state) {
        if(state.user === null) {
            state.user = JSON.parse(sessionStorage.getItem(`user`));
        }
        return state.user;
    }
};

相關文章