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

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

this.$store.commit()

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

this.$store.state

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

以上原因是因為把傳參的代碼寫到了登錄里，但是刷新時并沒有執(zhí)行登錄這段代碼，state里的數(shù)據(jù)因為刷新而清空了，所以側(cè)邊欄沒有數(shù)據(jù)。

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

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

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

JSON.stringify()

將數(shù)組存儲在本地存儲中。當(dāng)我們需要數(shù)組的時候，因為JSON.stringify使他變成了字符串，所以我們可以通過

JSON.parse()

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