사용자가 둘 중 하나에서 로그 아웃 할 때 열려있는 모든 탭을 자동으로 로그 아웃

Question

localStorage를 기반으로 로그인 페이지를 만들었습니다. 페이지로드시 localStorage의 값을 확인했습니다. 하나 이상의 탭에서 웹 페이지를 연 다음 탭 중 하나에서 로그 아웃하면 나머지 모든 페이지가 자동으로 로그 아웃됩니다.

다시로드/새로 고침이 로그 아웃했다는 의미입니다.

사용자가 페이지를 보거나 다른 방법으로이 문제를 해결할 때 스크립트를 실행하도록 도와주세요.

Answer 1

localStorage에 저장된 "세션"이 아직 존재하는 경우 매 100ms (예.)를 확인하는 작은 javascript를 작성하십시오. 아니요 인 경우 페이지를 새로 고칩니다. 이 경우 setInterval을 사용할 수 있습니다.

Answer 2

Page Visibility API for HTML5을 살펴보십시오. 이 밖으로

Answer 3

는 "로컬 스토리지가 어떤 사용자의 컴퓨터와 브라우저 탭을 통해 무제한 데이터를 저장 지속"당신을 도울 수는 ^Source

이 즉, 만약 당신이 빈/하나에 설정 한 로그인 데이터를 제거 탭을 선택하면 다른 모든 탭에서도 데이터가 변경됩니다.

따라서 사용자가 로그 아웃하면 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); 
} 

Source

이 당신이 지속적으로 자바 스크립트를 실행하거나 다시로드되지 않습니다 의미를 (A 가능하면 많은 양의) 탭을 동시에 사용할 수 있습니다.

Answer 4

을 사용하면 localStorage 값이 변경 될 때 알림을받을 수 있습니다.

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

경우, 예를 들어, 탭 중 하나는 로그 아웃 :

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

이 모든 다른 탭이 StorageEvent을 받게되며, 경고가 나타납니다

Logged in: false 

이 질문에 대한 답변을 보내주십시오.