JavaScript unterscheidet das Schlie?en des Browser -Registerkartens und das vollst?ndige Schlie?en des Browsers

Bei der t?glichen Verwendung von Multi-Tabs-Browsen müssen Benutzer m?glicherweise eine einzelne Registerkarte oder den gesamten Browser schlie?en. In einigen Anwendungsszenarien ist beispielsweise eine bestimmte Aktion erforderlich, wenn der Browser vollst?ndig geschlossen ist (z. B. L?schen von Anmeldeinformationen), jedoch nicht beim Schlie?en einer einzigen Registerkarte. In diesem Artikel wird untersucht, wie JavaScript verwendet wird, um zwischen diesen beiden Situationen zu unterscheiden und entsprechende L?sungen zu liefern.

Problembeschreibung

Angenommen, die Webanwendung, die wir entwickelt haben, l?uft im Chrome -Browser im Windows -System. Die Anforderung besteht darin, die Anmeldeinformationen zu l?schen, wenn der Benutzer den gesamten Browser schlie?t, w?hrend die Anmeldeinformationen beim Schlie?en einer einzigen Registerkarte unver?ndert bleiben. Wie implementiere ich diese Funktion?

L?sung

Wir k?nnen das sessionStorage -Objekt von HTML5 verwenden, um dieses Problem zu l?sen. Mit sessionStorage k?nnen Schlüsselwertpaardaten in derselben Sitzung gespeichert werden. Beim Schlie?en des Browsers werden die Daten in sessionStorage gel?scht, w?hrend das Schlie?en einer einzigen Registerkarte die sessionStorage -Daten anderer Registerkarten nicht beeinflusst.

Die spezifischen Implementierungsschritte sind wie folgt:

1. H?ren Sie sich das Browser Close -Ereignis an: Verwenden Sie das beforeunload -Ereignis, um den Browser -Schlie? oder die Registerkarte Schlie?ung anzuh?ren.

    window.adDeVentListener ('voranladung', Funktion (e) {
        // Code hinzufügen, um Anmeldeinformationen hier zu l?schen, aber es ist zu beachten, dass die direkte Ausführung auch beim Schlie?en der Registerkarte auch zum L?schen führen kann.
    });

2. Verwenden Sie SessionStorage, um das Schlie?verhalten zu unterscheiden: Wenn jede Registerkarte geladen wird, legen Sie ein sessionStorage -Element fest und überprüfen Sie, ob das Element bei der Schlie?ung vorhanden ist. Wenn es existiert, bedeutet dies, dass die Registerkartenseite geschlossen ist. Wenn es nicht existiert, bedeutet dies, dass der gesamte Browser geschlossen ist.

    // SessionStorage festlegen, wenn die Seite geladen wird
    window.addeventListener ('laden', function () {
        SessionStorage.SetItem ('tabopen', 'true');
    });
   
    // SessionStorage überprüfen, wenn sie geschlossen sind
    window.adDeVentListener ('voranladung', Funktion (e) {
        if (! sessionStorage.getItem ('tabopen')) {
            // Anmeldeinformationen ClearLogininfo ();
        } anders {
            // SessionStorage item SessionStorage.removeItem ('tabopen') entfernen;
        }
    });
   
    Funktion clearLogininfo () {
        // Fügen Sie den Code hinzu, um die Anmeldeinformationen hier zu Console.log zu l?schen ('L?schen von Anmeldeinformationen ...');
    }

Durch die obige Methode k?nnen wir effektiv zwischen dem Schlie?en der Registerkartenseite und dem Schlie?en des Browsers unterscheiden und den Betrieb der L?schung der Anmeldeinformationen durch vollst?ndig geschlossene Browser durchführen, w?hrend dieser Vorgang beim Schlie?en einer einzelnen Registerkartenseite nicht durchgeführt wird. Es ist zu beachten, dass das beforeunload Ereignis vom Browser abh?ngig von der spezifischen Implementierung der Browser- und Benutzereinstellungen abgefangen oder verz?gert werden kann. Um die Zuverl?ssigkeit zu verbessern, k?nnen andere Technologien wie das serverseitige Sitzungsmanagement berücksichtigt werden.

Das obige ist der detaillierte Inhalt vonWie unterscheidet ich zwischen dem Schlie?en eines Browser -Registerkartens und dem Schlie?en des gesamten Browsers mit JavaScript?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!