需求分析：

用戶打開(kāi)多個(gè)選項(xiàng)卡并登錄頁(yè)面， 如果其中一個(gè)頁(yè)面的賬號(hào)主體發(fā)生了改變（即切換了登錄的賬號(hào)），其他的頁(yè)面需要監(jiān)聽(tīng)到其改變并提示用戶去刷新， 類似于下圖

729cc2381e5020f98348f2e6ab4d98e.png

實(shí)現(xiàn)思路：

在每次獲取到用戶信息的時(shí)候， 在 localStorage存下來(lái)， 通過(guò)監(jiān)聽(tīng)storage 的變更來(lái)判斷， 用戶的賬戶主體信息是否發(fā)生了改變。

實(shí)現(xiàn)代碼：

記得在獲取到用戶信息的時(shí)候調(diào)用 localStorage.setItem(key, value) 去儲(chǔ)存下用戶信息， 然后監(jiān)聽(tīng)改存儲(chǔ)的值去做相應(yīng)的處理。

// 監(jiān)聽(tīng)到 storage 的變更， 通過(guò) e.key 判斷是否為賬戶主體的變更， 然后做相應(yīng)的操作
// 需要在獲取用戶信息的接口存儲(chǔ)一個(gè)字符串格式的json。 
window.addEventListener('storage', (e) => {
  // do something...
   console.log(e)
  })