29

localStorage に基づいて、ログイン ページを作成しました。ページの読み込み時に、localStorage の値を確認しました。複数のタブで Web ページを開き、いずれかのタブからログアウトすると、残りのすべてのページが自動的にログアウトするはずです。

リロード/リフレッシュがログアウトを意味する場合。

ユーザーがページを表示するとき、またはこの問題を解決する他の方法を言うときに、スクリプトを実行するのを手伝ってください。

4

4 に答える 4

54

Storageイベントを使用して、localStorageの値が変更されたときに通知を受け取ることができます。

function storageChange (event) {
    if(event.key === 'logged_in') {
        alert('Logged in: ' + event.newValue)
    }
}
window.addEventListener('storage', storageChange, false)

たとえば、タブの1つがログアウトした場合：

window.localStorage.setItem('logged_in', false)

次に、他のすべてのタブがを受け取りStorageEvent、アラートが表示されます。

Logged in: false

これがあなたの質問に答えることを願っています！

于 2012-11-22T13:43:04.250 に答える
6

「localStorageは、保存されたデータをユーザーのコンピューターとブラウザーのタブ間で無期限に保持します」ソース

つまり、1つのタブで設定したログインデータを空にする/削除すると、他のすべてのタブでもデータが変更されます。

したがって、ユーザーがログアウトすると、localStorageデータが変更されます。次に、タブで、イベント
を使用して、ユーザーがフォーカスをそのタブに再び変更したことを検出します。onfocus

function onFocus(){
//Reload Page if logged out (Check localStorage)
    window.location.reload();
};

if (/*@cc_on!@*/false) { // check for Internet Explorer
    document.addEventHandler("focusin", onFocus);
} else {
    window.addEventHandler("focus", onFocus);
}

ソース

これは、JavaScriptを常に実行したり、（場合によっては大量の）タブを同時にリロードしたりすることはないことを意味します。

于 2012-11-22T13:41:33.677 に答える
0

HTML5 の Page Visibility API をご覧ください。これはあなたを助けることができます

于 2012-11-22T13:40:42.927 に答える