Comment faire la distinction entre l'actualisation et la fermeture du navigateur à l'aide du stockage local HTML5 ?

Identification entre les actions d'actualisation et de fermeture du navigateur

La distinction entre l'actualisation de la page et la fermeture du navigateur peut poser un défi lorsque les deux actions déclenchent l'événement ONUNLOAD. Cependant, il existe une solution utilisant le stockage local HTML5 et la communication client/serveur AJAX.

Gestion des événements Onunload

Dans la fenêtre de votre page, ajoutez un gestionnaire d'événements 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
}

Gestion des événements de chargement

Dans le corps de votre page, ajoutez un gestionnaire d'événements de chargement :

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
        }
    }
}

Gestion côté serveur

Sur le serveur, implémentez un processus pour collecter les demandes de déconnexion et planifiez un thread de minuterie pour vérifier les demandes expirées. Dans les 5 secondes (dans cet exemple), déconnectez les utilisateurs dont les demandes ont expiré. Si une annulation de déconnexion est reçue, supprimez la demande correspondante de la liste.

Cette approche peut également être utilisée pour différencier la fermeture d'onglets/fenêtres et les soumissions de liens/formulaires. Placez les gestionnaires d'événements sur toutes les pages contenant des liens ou des formulaires et leurs pages de destination.

Bien que cette solution utilise le stockage local, notez qu'elle peut ne pas convenir aux navigateurs qui ne prennent pas en charge le stockage local HTML5. Envisagez des approches spécifiques pour gérer ces scénarios.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!