Wie unterscheidet ich zwischen dem Schließen eines Browser -Registerkartens und dem Schließen des gesamten Browsers mit JavaScript?

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!