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

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持錯新站長站。