vuex頁面刷新後數據丟失

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;
    }
};