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
}

Onload イベント処理

ページの本文に、onload イベント ハンドラーを追加します:

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 中国語 Web サイトの他の関連記事を参照してください。