一.cookie、session、localStorage、sessionStorge總體介紹
cookie：瀏覽器儲存，最大4KB，請求頭會自動帶上（最先驗證的時候可以使用），vue中默認有效時間為瀏覽器關閉，django中可以自己設置。（位於google的setting里面，你可以去找找/控制台的Application里面都有）
session：保存在服務器，配合着用挺好。（一般是放在數據庫里的session表里面）
localStorage：除非被清除，否則永久保存，大小5M，最大好處，你不刪除永遠存在。（控制台的Application里面都有）
sessionStorage：僅在當前會話下有效，關閉頁面或瀏覽器后被清除，大小5M，這是它與上面的區別。（控制台的Application里面都有）
localStorage:
1.查詢數據：localStorage.getItem('dataTest')
2.修改數據：localStorage.setItem('dataTest', '這是測試的')
3.刪除數據/全刪除：localStorage.removeItem('dataTest') | localStorage.clear()
sessionStorage:
1.查詢數據：sessionStorage.getItem('token')
2.修改數據：sessionStorage.setItem('token', 'lalla')
3.刪除數據/全刪除：sessionStorage.removeItem("token") | sessionStorage.clear()
在vue項目中用vuex來做全局的狀態管理， 發現當刷新網頁后，保存在vuex實例store里的數據會丟失。
原因：
因為store里的數據是保存在運行內存中的,當頁面刷新時，頁面會重新加載vue實例，store里面的數據就會被重新賦值初始化
解決思路：
將state的數據保存在localstorage、sessionstorage或cookie中（三者的區別），這樣即可保證頁面刷新數據不丟失且易於讀取。
localStorage: localStorage的生命周期是永久的，關閉頁面或瀏覽器之后localStorage中的數據也不會消失。localStorage除非主動刪除數據，否則數據永遠不會消失。
sessionStorage:sessionStorage的生命周期是在僅在當前會話下有效。sessionStorage引入了一個“瀏覽器窗口”的概念，sessionStorage是在同源的窗口中始終存在的數據。只要這個瀏覽器窗口沒有關閉，即使刷新頁面或者進入同源另一個頁面，數據依然存在。但是sessionStorage在關閉了瀏覽器窗口后就會被銷毀。同時獨立的打開同一個窗口同一個頁面，sessionStorage也是不一樣的。
cookie:cookie生命期為只在設置的cookie過期時間之前一直有效，即使窗口或瀏覽器關閉。 存放數據大小為4K左右,有個數限制（各瀏覽器不同），一般不能超過20個。缺點是不能儲存大數據且不易讀取。
由於vue是單頁面應用，操作都是在一個頁面跳轉路由，因此sessionStorage較為合適,原因如下：
sessionStorage可以保證打開頁面時sessionStorage的數據為空；
每次打開頁面localStorage存儲着上一次打開頁面的數據，因此需要清空之前的數據。
vuex中state數據的修改必須通過mutation方法進行修改，因此mutation修改state的同時需要修改sessionstorage,問題倒是可以解決但是感覺很麻煩，state中有很多數據，很多mutation修改state就要很多次sessionstorage進行修改，既然如此直接用sessionstorage解決不就行了，為何還要用vuex多此一舉呢？
vuex的數據在每次頁面刷新時丟失，是否可以在頁面刷新前再將數據存儲到sessionstorage中呢，是可以的，beforeunload事件可以在頁面刷新前觸發，但是在每個頁面中監聽beforeunload事件感覺也不太合適，那么最好的監聽該事件的地方就在app.vue中。
在app.vue的created方法中讀取sessionstorage中的數據存儲在store中，此時用vuex.store的replaceState方法，替換store的根狀態
在beforeunload方法中將store.state存儲到sessionstorage中。
代碼如下：
export default {
name: 'App',
created () {
//在頁面加載時讀取sessionStorage里的狀態信息
if (sessionStorage.getItem("store") ) {
this.$store.replaceState(Object.assign({}, this.$store.state,JSON.parse(sessionStorage.getItem("store"))))
}
//在頁面刷新時將vuex里的信息保存到sessionStorage里
window.addEventListener("beforeunload",()=>{
sessionStorage.setItem("store",JSON.stringify(this.$store.state))
})
}
}