[ブラウザ]タブを閉じることと、JavaScriptを使用してブラウザ全体を閉じることを区別する方法は？

JavaScriptはブラウザタブの閉鎖とブラウザの完全閉鎖を区別します

マルチタブブラウジングの毎日の使用では、ユーザーは単一のタブまたはブラウザ全体を閉じる必要がある場合があります。たとえば、いくつかのアプリケーションシナリオでは、ブラウザが完全に閉じている場合（ログイン情報のクリアなど）、単一のタブを閉じるときはそうではありません。この記事では、JavaScriptを使用してこれら2つの状況を区別し、対応するソリューションを提供する方法について説明します。

問題の説明

開発したWebアプリケーションが、WindowsシステムのChromeブラウザで実行されるとします。要件は、ユーザーがブラウザ全体を閉じるときにログイン情報をクリアし、単一のタブを閉じるときにログイン情報を変更しないようにすることです。この関数を実装する方法は？

解決

HTML5のsessionStorageオブジェクトを使用して、この問題を解決できます。 sessionStorage使用すると、キー価値ペアデータを同じセッションに保存できます。ブラウザを閉じると、 sessionStorageのデータがクリアされ、単一のタブを閉じると他のタブのsessionStorageデータには影響しません。

特定の実装手順は次のとおりです。

1. ブラウザクローズイベントをリッスンします： beforeunloadイベントを使用して、ブラウザのクローズまたはタブのクローズ操作をリッスンします。

    window.addeventlistener（ 'beforeunload'、function（e）{
        //ここでログイン情報をクリアするためにコードを追加しますが、ここで直接実行することは、タブを閉じるときにクリアすることにもつながる可能性があることに注意する必要があります。
    }）;

2. sessionstorageを使用して閉じる動作を区別します。各タブがロードされたら、 sessionStorageアイテムを設定し、閉じたときにアイテムが存在するかどうかを確認します。存在する場合、タブページが閉じられていることを意味します。存在しない場合、ブラウザ全体が閉じられていることを意味します。

    //ページが読み込まれたときにsessionStorageを設定します
    window.addeventlistener（ 'load'、function（）{
        sessionStorage.setItem（ 'tabopen'、 'true'）;
    }）;
   
    //閉じたときにSESSIONSTORAGEを確認してください
    window.addeventlistener（ 'beforeunload'、function（e）{
        if（！sessionStorage.getItem（ 'tabopen'））{
            //ログイン情報ClearLoginInfo（）;
        } それ以外 {
            // sessionStorageアイテムsessionStorage.RemoveItem（ 'tabopen'）;
        }
    }）;
   
    関数ClearLoginInfo（）{
        //ここでログイン情報をクリアするためにコードをConsole.log（ 'ログイン情報のクリア...'）;
    }

上記の方法を使用して、タブページを閉じることとブラウザの閉鎖を効果的に区別し、ブラウザが完全に閉じているときにログイン情報をクリアする操作を実行できますが、この操作は1つのタブページを閉じるときに実行されません。ブラウザとユーザー設定の特定の実装に応じて、ブラウザによってbeforeunloadイベントがインターセプトまたは遅延する可能性があることに注意する必要があります。信頼性を向上させるために、サーバー側のセッション管理などの他のテクノロジーを考慮することができます。

以上が[ブラウザ]タブを閉じることと、JavaScriptを使用してブラウザ全体を閉じることを区別する方法は？の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。