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

比如這里，當我從登錄頁面進入到主頁的時候，接口的回調函數中有主頁側邊欄的數據的，正常情況下，通過

this.$store.commit()

把數據存到state里，并在需要的頁面通過

this.$store.state

讀取，但是，當我們刷新后發(fā)現側邊欄里的數據不見了。

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

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

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

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

JSON.stringify()

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

JSON.parse()

使用從本地存儲中獲取數組。如圖所示，現在側邊欄正常顯示了。