vue實踐-多標籤頁共享sessionstorage

背景：新入手了vue，一路摸索，成功的完成了一個簡易的系統；但是在用戶登錄驗證這塊出現了問題：
在一個標籤頁登錄後，將頁面url拷貝到新的頁面中訪問，發現又自動跳轉到登錄界面；
經過一番努力，發現是因爲前端的自校驗用戶信息存儲在sessionstorage中，而sessionstorage是針對單標籤頁的，因此就有了這篇文章，共享sessionstorage。
看了很多博客，有詳細的方法的，但因爲是小白入門，因此也不知道怎麼調用對應的方法，因此做一個詳細記錄。

實踐

方法原理：

1. 通過localstorage的改變事件，監聽標誌位的改變；
2. 將sessionstorage中的內容讀取寫入localstorage，再移除，觸發需要傳遞的信息的localstorage改變事件；
3. 最終將需要傳遞的信息寫入新頁面的sessionstorage中；

具體操作：
在main.js中加入如下代碼塊即可：

// 1.  觸發標誌位改變事件
window.localStorage.setItem(constant.SESSION_FLAG, Date.now().toString())
window.addEventListener("storage", function(event){
    if(!event.newValue){
        return;
    }
    // 2. 監聽標誌位改變事件
    if(event.key === constant.SESSION_FLAG){
    	// 3. 觸發傳遞信息的改變事件
        localStorage.setItem("storeSessionData", sessionStorage.getItem(constant.SESSION_ID))
        localStorage.removeItem("storeSessionData")
    } else if (event.key === 'storeSessionData') { // 4. 監聽 傳遞信息 的改變事件
        sessionStorage.setItem(constant.SESSION_ID, event.newValue)
    }
})

該方法主要還是利用了window事件監聽的方式實現的，不侷限於vue；僅項目實現通過vue，這裏提供一種完整的嵌入方式。

疑問：
爲什麼在第三步時可以獲取到sessionstorage中的值呢？
增加打印，測試結果：

1. 在原始標籤頁中，3,4步驟均有進入，即同頁面進行了更新；
2. 在新標籤頁中，僅步驟4有進入，即只監聽到了 storeSessionData改變事件；

結論：機制感覺還是有些不明白，不過感覺大體應該是通過localstorage的全局特性完成了sessionstorage的共享；

增加打印的代碼：

window.localStorage.setItem(constant.SESSION_FLAG, Date.now().toString())
window.addEventListener("storage", function(event){
    if(!event.newValue){
        return;
    }
    if(event.key === constant.SESSION_FLAG){
        localStorage.setItem("storeSessionData", sessionStorage.getItem(constant.SESSION_ID))
        console.log('sessionStorage.getItem(constant.SESSION_ID):' + sessionStorage.getItem(constant.SESSION_ID))
        localStorage.removeItem("storeSessionData")
    } else if (event.key === 'storeSessionData') {
        console.log('event.newValue:' + event.newValue)
        sessionStorage.setItem(constant.SESSION_ID, event.newValue)
    }
})