我們都知道store中的數(shù)據(jù)是不能持久化儲(chǔ)存的，在刷新瀏覽器的時(shí)候store中的數(shù)據(jù)都會(huì)被清空，但有時(shí)候我們需要持久化儲(chǔ)存一些數(shù)據(jù)，這里可以用到瀏覽器的本地存儲(chǔ)（session Storage、Local Storage、cookie）。

比如這里，當(dāng)我從登錄頁面進(jìn)入到主頁的時(shí)候，接口的回調(diào)函數(shù)中有主頁側(cè)邊欄的數(shù)據(jù)的，正常情況下，通過

this.$store.commit()

把數(shù)據(jù)存到state里，并在需要的頁面通過

this.$store.state

讀取，但是，當(dāng)我們刷新后發(fā)現(xiàn)側(cè)邊欄里的數(shù)據(jù)不見了。

以上原因是因?yàn)榘褌鲄⒌拇a寫到了登錄里，但是刷新時(shí)并沒有執(zhí)行登錄這段代碼，state里的數(shù)據(jù)因?yàn)樗⑿露蹇樟耍詡?cè)邊欄沒有數(shù)據(jù)。

因此我們需要使用瀏覽器本地存儲(chǔ)來中轉(zhuǎn)一下數(shù)據(jù)，這里我們使用Local Storage（cookie是最合適的，但是使用方法需要自己封裝不夠友好，余下兩個(gè)有自帶的方法），

存儲(chǔ)：localStorage.setItem("name","bonly")
讀?。簂ocalStorage.getItem("name")
覆蓋：localStorage.setItem("name","TOM") //這里與存儲(chǔ)的方法一樣，只是覆蓋了原本的內(nèi)容。
刪除：localStorage.removeItem("name")

于是按照以上代碼把數(shù)據(jù)存到localStorage中，但是發(fā)現(xiàn)，還是讀不出來，博客上看了一下，原來是本地存儲(chǔ)的一個(gè)限制是它將數(shù)組存儲(chǔ)為字符串，為了克服這個(gè)問題，我們使用

JSON.stringify()

將數(shù)組存儲(chǔ)在本地存儲(chǔ)中。當(dāng)我們需要數(shù)組的時(shí)候，因?yàn)镴SON.stringify使他變成了字符串，所以我們可以通過

JSON.parse()

使用從本地存儲(chǔ)中獲取數(shù)組。如圖所示，現(xiàn)在側(cè)邊欄正常顯示了。