HTML5 로컬 저장소를 사용하여 브라우저 새로 고침과 종료를 구별하는 방법은 무엇입니까?

브라우저 새로 고침 작업과 닫기 작업 식별

두 작업 모두 ONUNLOAD 이벤트를 트리거할 때 페이지 새로 고침과 브라우저 닫기를 구별하는 것이 어려울 수 있습니다. 그러나 HTML5 로컬 스토리지와 클라이언트/서버 AJAX 통신을 사용하는 솔루션이 있습니다.

Onunload 이벤트 처리

페이지 창에서 onunload 이벤트 핸들러를 추가하세요.

function myUnload(event) {
    // Set a local storage flag indicating an unload event
    if (window.localStorage) {
        window.localStorage['myUnloadEventFlag'] = new Date().getTime();
    }

    // Notify the server of a disconnection request
    askServerToDisconnectUserInAFewSeconds(); // Synchronous AJAX call
}

온로드 이벤트 처리

페이지 본문에 다음과 같은 온로드 이벤트 핸들러를 추가하세요.

function myLoad(event) {
    if (window.localStorage) {
        // Check the time between the last unload event and the current time
        var t0 = Number(window.localStorage['myUnloadEventFlag']);
        var t1 = new Date().getTime();
        var duration = t1 - t0;

        if (duration < 10 * 1000) {
            // Page reloaded: Cancel disconnection request
            askServerToCancelDisconnectionRequest(); // Asynchronous AJAX call
        } else {
            // Tab/window closed: Perform desired action
        }
    }
}

서버측 관리

서버에서 연결 해제 요청을 수집하는 프로세스를 구현하고 시간 초과된 요청을 확인하기 위해 타이머 스레드를 예약합니다. 이 예에서는 5초 이내에 시간 초과된 요청으로 사용자의 연결을 끊습니다. 연결 해제 취소가 수신되면 목록에서 해당 요청을 제거합니다.

이 접근 방식은 탭/창 닫기와 링크/양식 제출을 구별하는 데에도 사용할 수 있습니다. 링크나 양식이 있는 모든 페이지와 해당 랜딩 페이지에 이벤트 핸들러를 배치합니다.

이 솔루션은 로컬 저장소를 사용하지만 HTML5 로컬 저장소를 지원하지 않는 브라우저에는 적합하지 않을 수 있습니다. 이러한 시나리오를 처리하기 위한 구체적인 접근 방식을 고려하세요.

위 내용은 HTML5 로컬 저장소를 사용하여 브라우저 새로 고침과 종료를 구별하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!