2012-11-22 17 views
19

localStorageに基づいてログインページを作成しました。 ページを読み込む際に、私はlocalStorageの値をチェックしました。 複数のタブでWebページを開き、いずれかのタブからログアウトした場合、残りのページはすべて自動的にログアウトする必要があります。開いているすべてのタブをユーザがログアウトしたときに自動的にログアウトする

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

この問題を解決するには、ユーザーがページを表示したり、他の方法でスクリプトを実行したりしてください。

+0

あなたが実際に質問している質問に関連性を持たせるためにあなたの質問のタイトルを編集しました。 –

答えて

1

localStorageに保存されている「セッション」がまだ存在する場合は、100msごとにチェックする小さなjavascriptを書きます(例)。いいえの場合は、ページを更新します。これにはsetIntervalを使用できます。

+0

とここでは、繰り返し5秒ごとにアタックスコールを繰り返していました。これは素晴らしい考えです。 –

+0

または、イベントを使用してCPU時間を節約できます。 –

+1

彼はsessionStorageの代わりにlocalStorageをポーリングするべきですか? sessionStorageはタブ間で共有されません。 – AlexStack

-1

Page Visibility API for HTML5をご覧ください。 これは、これはあなたが空に/あなたは1に設定したログインデータを削除する場合という意味「のlocalStorageは、任意のユーザーのコンピュータ上で無制限にデータを保存し、ブラウザのタブ間で保持」Source

5

をあなたを助けることができます他のすべてのタブでもデータが変更されます。

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

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

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

Source

これは、あなたは常にJavaScriptを実行している、または再ロードされないことを意味します(Aおそらく大量の)タブを同時に表示することができます。

+1

downvotesとは何ですかo.O人々が実際に理由を与えるのはいいです... – Cerbrus

+2

「ハードワイヤー」イベントはお勧めできません。この方法でイベントハンドラーを簡単に上書きできます。代わりに 'window.addEventHandler'を使用してください。 –

+0

修正しました。 – Cerbrus

38

Storage eventsを使用して、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 

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

+0

ありがとうたくさんの!ソースが大いに役立った! – Diego

関連する問題