JavaScriptはブラウザタブの閉鎖とブラウザの完全閉鎖を區(qū)別します

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

問題の説明

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

解決

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

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

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

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

2. sessionstorageを使用して閉じる動作を區(qū)別します。各タブがロードされたら、 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'）;
        }
    }）;
   
    関數(shù)ClearLoginInfo（）{
        //ここでログイン情報をクリアするためにコードをConsole.log（ 'ログイン情報のクリア...'）;
    }

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

以上が[ブラウザ]タブを閉じることと、JavaScriptを使用してブラウザ全體を閉じることを區(qū)別する方法は？の詳細內容です。詳細については、PHP 中國語 Web サイトの他の関連記事を參照してください。