sessionStorage 方法針對一個 session 進行數據存儲。當用戶關閉瀏覽器窗口後,數據會被刪除。html
用法: vue
儲存: 1. 點(.)運算符 sessionStorage.lastname = 'JSAnntQ'; vuex
2. 方括號([ ])運算符 sessionStorage['lastname'] = 'JSAnntQ';數組
3. localStorage.setItem sessionStorage.setItem("lastname", "JSAnntQ"); 瀏覽器
儲存: 1. 點(.)運算符 sessionStorage.lastname session
2. 方括號([ ])運算符 sessionStorage['lastname'] post
3. localStorage.getItem sessionStorage.getItem("lastname"); localstorage
2. localStorage
localStorage 方法存儲的數據沒有時間限制。次日、第二週或下一年以後,數據依然可用。htm
用法: 對象
儲存: 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。