VueX存儲與本地存儲以及會話存儲的差別

1、差別及适用場景

（1）差別：

​

​vuex​

​存儲在記憶體，​

​localstorage​

​（本地存儲）則以檔案的方式存儲在本地,永久儲存；​

​sessionstorage​

​​( 會話存儲 ) ,臨時儲存。​

​localStorage​

​​和​

​sessionStorage​

​隻能存儲字元串類型，對于複雜的對象可以使用​

​ECMAScript​

​​提供的​

​JSON​

​​對象的​

​stringify​

​​和​

​parse​

​來處理。

（2）應用場景：

​

​vuex​

​用于元件之間的傳值，​

​localstorage​

​則主要用于不同頁面之間的傳值。

（3）永久性：

當重新整理頁面時​

​vuex​

​​存儲的值會丢失，​

​localstorage​

​​不會。注：很多同學覺得用​

​localstorage​

​​可以代替​

​vuex​

​, 對于不變的資料确實可以，但是當兩個元件共用一個資料源（對象或數組）時，如果其中一個元件改變了該資料源，希望另一個元件響應該變化時，localstorage無法做到響應式，vuex可以綁定資料響應式。

2、Vuex資料狀态持久化的使用場景

（1）購物車

比如你把商品加入購物車後，沒有儲存到背景的情況下，前端來存，就可以通過這種方式​

​vuex+localStorage(sessionStorage)​

​。

（2）會話狀态

（3）一些不會經常改變的資料