在我們***項目中唱凯，使用了Vue前端框架，由于某些頁面（比如最近的秋季抽獎主題以及玩家社區(qū)評論頁面和點贊頁面）需要用戶登錄才能進(jìn)行簽到谎痢、抽獎磕昼、評論和點贊等功能。一般像這樣的用戶信息一般都是存在Vuex里面节猿，因為Vuex 是一個專為 Vue.js 應(yīng)用程序開發(fā)的狀態(tài)管理模式票从。它采用集中式存儲管理應(yīng)用的所有組件的狀態(tài)，并以相應(yīng)的規(guī)則保證狀態(tài)以一種可預(yù)測的方式發(fā)生變化滨嘱。但是Vuex雖然能存儲狀態(tài)峰鄙，但是一旦頁面刷新，用戶狀態(tài)也隨之刷新消失太雨，如果想要用戶狀態(tài)不會因為刷新而消失吟榴，這里便要用到本地存儲了。因為localStorage解決了cookie存儲空間不足的問題(cookie中每條cookie的存儲空間為4k)囊扳，localStorage中一般瀏覽器支持的是5M大小吩翻，相當(dāng)于前端頁面的數(shù)據(jù)庫。
在萬歲爺官網(wǎng)中采用了localStorage + Vuex結(jié)合來保存用戶信息锥咸，Vuex結(jié)構(gòu)如下圖1仿野。
在本項目中，我單獨將localStorage放在一個js里面她君，在有需要的時候可以調(diào)用脚作，如圖2。
This.get是讀取localStorage里面的數(shù)據(jù)缔刹，this.set是將數(shù)據(jù)存入localStorage球涛，this.clear清除localStorage里的數(shù)據(jù)。
如果需要調(diào)用localStorage校镐，則可以在需要調(diào)用的文件里面引入localStorage亿扁。如圖3。
存儲基礎(chǔ)信息鸟廓，將傳入的data賦值給state.user_datas,然后將state存入localStorage.user_info从祝。
清除localStorage里面的數(shù)據(jù)，可以將state.user_datas設(shè)置為空值引谜，然后將空值存入localStorage.user_info牍陌。這樣localStorage里面的數(shù)據(jù)就為空。這個在登出網(wǎng)站的時候可以用到员咽。
在登錄網(wǎng)站的時候毒涧，在請求用戶數(shù)據(jù)后，利用this.$store.commit將請求到的數(shù)據(jù)存入localStorage贝室。存入localStorage里面的信息如果不手動刪除是會一直存在的契讲，可以在整個項目里直接調(diào)用仿吞。如圖6。
在登出網(wǎng)站的時候捡偏，直接this.$store.commit(‘CLEAR_BASEINFO’)唤冈。即可刪除localStorage里面用戶的狀態(tài)信息。如圖7银伟。
好了务傲，就這樣~
