目錄
Vuex
Vuex 是一個專爲 Vue.js 應用程序開發的狀態管理模式。它採用集中式存儲管理應用的所有組件的狀態，並以相應的規則保證狀態以一種可預測的方式發生變化。
localStorage
譯爲“本地存儲器”，是HTML5中新增的一個存儲對象，跟cookie一樣也是用來本地存儲來的，但是解決了cookie存儲空間不足的問題(cookie每條存儲空間爲4k)，而localStorage瀏覽器一般支持5M。
sessionStorage
譯爲“會話存儲”，也是HTML5新增的一個存儲對象， 用於本地臨時存儲同一窗口的數據，在關閉窗口之後將會刪除這些數據，sessionStorage瀏覽器一般支持5M。
注意：localStorage或sessionStorage通常以鍵/值對形式的字符串進行存儲，所以在存儲時需要對數據格式進行轉換，使用JSON.stringify方法將對象轉換成字符串，提取時用JSON.parse方法將字符串轉換成對象。
使用vuex+localStorage/sessionStorage可以解決vuex刷新數據丟失的問題。https://blog.csdn.net/maidu_xbd/article/details/104774454
語法
localStorage/sessionStorage語法
|
方法 |
localStorage語法 |
sessionStorage語法 |
|
保存數據 |
localStorage.setItem("key","value") |
sessionStorage.setItem("key","value") |
|
讀取數據 |
localStorage.getItem("key") |
sessionStorage.getItem("key") |
|
刪除數據 |
localStorage.removeItem("key") |
sessionStorage.removeItem("key") |
|
清空 |
localStorage.clear() |
sessionStorage.clear() |
|
獲取指定下標數據 |
localStorage.key(0) |
sessionStorage.key(0) |
打開瀏覽器開發者工具，在Application中查看localStorage和sessionStorage。
vuex語法及使用：https://blog.csdn.net/maidu_xbd/article/details/89140696
區別
- vuex存儲在內存，localstorage則以文件的方式存儲在本地，sessionstorage會話存儲，臨時保存。
- localStorage和sessionStorage只能存儲字符串類型，vuex可以存儲任意數據類型。
- vuex用於組件之間的傳值，localstorage、sessionstorage則主要用於不同頁面之間的傳值。
- 當刷新頁面時,vuex存儲的值會丟失，sessionStorage、localstorage存儲的值不會丟失。
- localStorage中的數據可在多個標籤頁共享，sessionStorage中的數據只能在一個標籤中。
- sessionStorage的數據只保存在當前會話中，當關閉窗口或標籤頁之後將會刪除這些數據，而localStorage屬於永久性存儲，需要在關閉瀏覽器或退出登錄時手動刪除。
參考：