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; } };
聲明:本網頁內容旨在傳播知識,若有侵權等問題請及時與本網聯系,我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com