브라우저 탭을 닫고 JavaScript를 사용하여 전체 브라우저를 닫는 것을 구별하는 방법은 무엇입니까?

JavaScript는 브라우저 탭 닫기와 브라우저 전체를 구별합니다.

멀티 탭 브라우징을 매일 사용하면 사용자는 단일 탭 또는 전체 브라우저를 닫아야 할 수도 있습니다. 예를 들어 일부 응용 프로그램 시나리오에서는 브라우저가 완전히 닫힐 때 (예 : 로그인 정보를 지우므로) 특정 작업이 필요하지만 단일 탭을 닫을 때는 그렇지 않습니다. 이 기사는 JavaScript를 사용 하여이 두 상황을 구별하고 해당 솔루션을 제공하는 방법을 살펴 봅니다.

문제 설명

우리가 개발 한 웹 애플리케이션이 Windows 시스템의 Chrome 브라우저에서 실행된다고 가정합니다. 요구 사항은 사용자가 전체 브라우저를 닫을 때 로그인 정보를 지우고 단일 탭을 닫을 때 로그인 정보를 변경하지 않은 상태로 유지하는 것입니다. 이 기능을 구현하는 방법?

해결책

HTML5의 sessionStorage 객체를 사용 하여이 문제를 해결할 수 있습니다. sessionStorage 사용하면 키 값 쌍 데이터가 동일한 세션에 저장 될 수 있습니다. 브라우저를 닫으면 sessionStorage 의 데이터가 지워지고 단일 탭을 닫으면 다른 탭의 sessionStorage 데이터에 영향을 미치지 않습니다.

특정 구현 단계는 다음과 같습니다.

1. 브라우저 클로즈 이벤트를 들으십시오. 이전 이벤트 beforeunload 이벤트를 사용하여 브라우저 닫기 또는 탭 닫기 작업을 들으십시오.

    window.addeventListener ( '전후', 함수 (e) {
        // 여기에서 로그인 정보를 지우기 위해 코드를 추가하지만 여기에서 직접 실행하면 탭을 닫을 때 지우기로 이어질 수 있습니다.
    });

2. SessionStorage를 사용하여 폐쇄 동작을 구별하십시오. 각 탭이로드되면 sessionStorage 항목을 설정하고 닫을 때 항목이 존재하는지 확인하십시오. 존재하면 탭 페이지가 닫혀 있음을 의미합니다. 존재하지 않으면 전체 브라우저가 닫혀 있음을 의미합니다.

    // 페이지로드 될 때 SessionStorage를 설정합니다
    window.addeventListener ( 'load', function () {
        SessionStorage.setitem ( 'fabopen', 'true');
    });
   
    // 닫으면 SessionStorage를 확인하십시오
    window.addeventListener ( '전후', 함수 (e) {
        if (! sessionstorage.getitem ( 'fabopen')) {
            // 로그인 정보 지우기 정보 CLEARLOGININFO ();
        } 또 다른 {
            // sessionStorage item sectionStorage.removeItem ( 'fabopen')을 제거합니다.
        }
    });
   
    함수 clearlogininfo () {
        // 여기에 로그인 정보를 Console.log에 지우기 위해 코드를 추가합니다 ( '로그인 정보 지우기 ...');
    }

위의 방법을 통해 탭 페이지를 닫고 브라우저를 닫는 것을 효과적으로 구별하고 브라우저가 완전히 닫힐 때 로그인 정보를 지우는 작업을 수행 할 수 있으며 단일 탭 페이지를 닫을 때이 작업은 수행되지 않습니다. 브라우저 및 사용자 설정의 특정 구현에 따라 브라우저에서 beforeunload 이벤트가 인터셉트 또는 지연 될 수 있습니다. 신뢰성을 향상시키기 위해 서버 측 세션 관리와 같은 다른 기술이 고려 될 수 있습니다.

위 내용은 브라우저 탭을 닫고 JavaScript를 사용하여 전체 브라우저를 닫는 것을 구별하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!