小謝第37問：關於websocket推送進度，本地保存進度條，然後跳出頁面進入後再顯示的問題
1、主要技術點：sessionStorage 會話存儲進度
這裡在使用之前，順便說一下cookie、sessionStorage、localStorage
共同點：都是保存在瀏覽器端，且同源的。
區別：cookie數據始終在同源的http請求中攜帶（即使不需要），即cookie在瀏覽器和伺服器間來回傳遞。而sessionStorage和localStorage不會自動把數據發給伺服器，僅在本地保存。cookie數據還有路徑（path）的概念，可以限制cookie只屬於某個路徑下。存儲大小限制也不同，cookie數據不能超過4k，同時因為每次http請求都會攜帶cookie，所以cookie只適合保存很小的數據，如會話標識。sessionStorage和localStorage 雖然也有存儲大小的限制，但比cookie大得多，可以達到5M或更大。數據有效期不同，sessionStorage：僅在當前瀏覽器窗口關閉前有效，自然也就不可能持久保持；localStorage：始終有效，窗口或瀏覽器關閉也一直保存，因此用作持久數據；cookie只在設置的cookie過期時間之前一直有效，即使窗口或瀏覽器關閉。作用域不同，sessionStorage不在不同的瀏覽器窗口中共享，即使是同一個頁面；localStorage 在所有同源窗口中都是共享的；cookie也是在所有同源窗口中都是共享的。Web Storage 支援事件通知機制，可以將數據更新的通知發送給監聽者。Web Storage 的 api 介面使用更方便。
sessionStorage用於本地存儲一個會話（session）中的數據，這些數據只有在同一個會話中的頁面才能訪問並且當會話結束後數據也隨之銷毀。
因此sessionStorage不是一種持久化的本地存儲，僅僅是會話級別的存儲。
而localStorage用於持久化的本地存儲，除非主動刪除數據，否則數據是永遠不會過期的。
2、在全局監聽websocket後，如果進度有變化，立即存儲進度、進度詳情至本地
window.sessionStorage.setItem('storeObject', JSON.stringify(storeObject));
3、在展示進度條的頁面中設置進度，監聽websocket推送進度值的變化並賦值給頁面的變數並存儲
let storeObject= {};
storeObject.platPercentage = this.platPercentage;
storeObject.percentDetail = this.percentDetail;
window.sessionStorage.setItem('storeObject', JSON.stringify(storeObject));
4、最重要的一步，在載入頁面之前，判斷session存儲的值是否存在，如果存在，就賦值進度，不存在，正常進行頁面載入
if(window.sessionStorage.getItem('storeObject')){
let storeObject= JSON.parse(window.sessionStorage.getItem('storeObject'));
this.platPercentage = storeObject.platPercentage;
this.percentDetail = storeObject.percentDetail;
}else{
}
如此，就能實現在傳輸過程中，跳轉其他頁面，不管什麼時候再進入頁面進度條仍然會實時顯示啦
