如果本文對您有幫助，請給我點贊哦~ 謝謝~

問題背景：

vue做了一個會員服務(wù)系統(tǒng)，用戶先后用兩個賬戶user1,user2在chrome中兩個tab頁進行登錄，系統(tǒng)的右上角會顯示用戶信息（比如用戶名：user1），當(dāng)user2登陸后，user1那個tab頁的用戶信息還是顯示的user1但是在頁面中進行操作后臺session信息其實已經(jīng)是user2了，為了不給用戶造成誤導(dǎo)，必須把信息實現(xiàn)更新

預(yù)期效果：

用戶先后用兩個賬戶user1,user2在chrome中兩個tab頁進行登錄，系統(tǒng)的右上角會顯示用戶信息，當(dāng)user2登陸后，user1那個tab頁的用戶信息自動跟新成user2

解決方法：

本來是一個很簡單的問題，奈何基礎(chǔ)功不扎實求助網(wǎng)絡(luò)，茫茫知識海洋中各種千奇百怪的解決方案，比如重寫prototype什么的，真是服了。最后發(fā)現(xiàn)其實解決方法很簡單。就是在顯示user1的那個vue頁面mounted里加上下面的代碼，并在用戶名所在元素上綁定id="username"即可。

  window.addEventListener('storage', function(e){

        if (e.key === 'user'){

            const currentUser = e.newValue? JSON.parse(e.newValue).userName : JSON.parse(e.oldValue).userName;

            const output = document.getElementById('username');

            output.innerHTML = currentUser;

        }

    })

適用范圍：

我只測了chrome瀏覽器，不過IE應(yīng)該也行，自己試試唄

另外不同host的由于localstorage不跨域所以當(dāng)前方法不適用

如果本文對您有幫助，請給我點贊哦~ 謝謝~