vuex存儲和本地存儲(localstorage、sessionstorage)的區別

 

1. sessionStorage 

　　sessionStorage 方法針對一個 session 進行數據存儲。當用戶關閉瀏覽器窗口後，數據會被刪除。

　　用法： 

　　　　儲存： 1. 點（.）運算符                          sessionStorage.lastname = 'JSAnntQ';   

　　　　　　　 2. 方括號（[ ]）運算符                 sessionStorage['lastname'] = 'JSAnntQ';

　　　　　　　 3. localStorage.setItem　　　　  sessionStorage.setItem("lastname", "JSAnntQ");　

　　　　

　　　　

　　　　儲存： 1. 點（.）運算符                          sessionStorage.lastname  

　　　　　　　 2. 方括號（[ ]）運算符                 sessionStorage['lastname'] 

　　　　　　　 3. localStorage.getItem                sessionStorage.getItem("lastname");　

 

2. localStorage 

　　localStorage 方法存儲的數據沒有時間限制。次日、第二週或下一年以後，數據依然可用。

　　用法： 

　　　　儲存： 1. 點（.）運算符                          localStorage.lastname = 'JSAnntQ';   

　　　　　　　 2. 方括號（[ ]）運算符                 localStorage['lastname'] = 'JSAnntQ';

　　　　　　　 3. localStorage.setItem　　　　  localStorage.setItem("lastname", "JSAnntQ");　

　　　　

　　　　

　　　　儲存： 1. 點（.）運算符                          localStorage.lastname  

　　　　　　　 2. 方括號（[ ]）運算符                 localStorage['lastname'] 

　　　　　　　 3. localStorage.getItem                localStorage.getItem("lastname");

3. vuex

　　Vuex 是一個專爲 Vue.js 應用程序開發的狀態管理模式。它採用集中式存儲管理應用的全部組件的狀態，並以相應的規則保證狀態以一種可預測的方式發生變化。

　　用法： https://vuex.vuejs.org/zh/

 

4. 總結

 

1.區別：vuex存儲在內存，localstorage（本地存儲）則以文件的方式存儲在本地,永久保存；sessionstorage( 會話存儲 ) ,臨時保存。localStorage和sessionStorage只能存儲字符串類型，對於複雜的對象能夠使用ECMAScript提供的JSON對象的stringify和parse來處理

2.應用場景：vuex用於組件之間的傳值，localstorage，sessionstorage則主要用於不一樣頁面之間的傳值。

3.永久性：當刷新頁面（這裏的刷新頁面指的是 --> F5刷新,屬於清除內存了）時vuex存儲的值會丟失，sessionstorage頁面關閉後就清除掉了，localstorage不會。  

注：不少同窗以爲用localstorage能夠代替vuex, 對於不變的數據確實能夠，可是當兩個組件共用一個數據源（對象或數組）時，若是其中一個組件改變了該數據源，但願另外一個組件響應該變化時，localstorage，sessionstorage沒法作到，緣由就是區別1。

總結來源：　http://www.javashuo.com/article/p-grsyvgmu-es.html