在我們***項(xiàng)目中，使用了Vue前端框架，由于某些頁面（比如最近的秋季抽獎(jiǎng)主題以及玩家社區(qū)評(píng)論頁面和點(diǎn)贊頁面）需要用戶登錄才能進(jìn)行簽到、抽獎(jiǎng)、評(píng)論和點(diǎn)贊等功能。一般像這樣的用戶信息一般都是存在Vuex里面，因?yàn)閂uex 是一個(gè)專為 Vue.js 應(yīng)用程序開發(fā)的狀態(tài)管理模式。它采用集中式存儲(chǔ)管理應(yīng)用的所有組件的狀態(tài)，并以相應(yīng)的規(guī)則保證狀態(tài)以一種可預(yù)測的方式發(fā)生變化。但是Vuex雖然能存儲(chǔ)狀態(tài)，但是一旦頁面刷新，用戶狀態(tài)也隨之刷新消失，如果想要用戶狀態(tài)不會(huì)因?yàn)樗⑿露?，這里便要用到本地存儲(chǔ)了。因?yàn)閘ocalStorage解決了cookie存儲(chǔ)空間不足的問題(cookie中每條cookie的存儲(chǔ)空間為4k)，localStorage中一般瀏覽器支持的是5M大小，相當(dāng)于前端頁面的數(shù)據(jù)庫。
在萬歲爺官網(wǎng)中采用了localStorage + Vuex結(jié)合來保存用戶信息，Vuex結(jié)構(gòu)如下圖1。
在本項(xiàng)目中，我單獨(dú)將localStorage放在一個(gè)js里面，在有需要的時(shí)候可以調(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ǔ)基礎(chǔ)信息，將傳入的data賦值給state.user_datas,然后將state存入localStorage.user_info。
清除localStorage里面的數(shù)據(jù)，可以將state.user_datas設(shè)置為空值，然后將空值存入localStorage.user_info。這樣localStorage里面的數(shù)據(jù)就為空。這個(gè)在登出網(wǎng)站的時(shí)候可以用到。
在登錄網(wǎng)站的時(shí)候，在請求用戶數(shù)據(jù)后，利用this.$store.commit將請求到的數(shù)據(jù)存入localStorage。存入localStorage里面的信息如果不手動(dòng)刪除是會(huì)一直存在的，可以在整個(gè)項(xiàng)目里直接調(diào)用。如圖6。
在登出網(wǎng)站的時(shí)候，直接this.$store.commit(‘CLEAR_BASEINFO’)。即可刪除localStorage里面用戶的狀態(tài)信息。如圖7。
好了，就這樣~
