Muchos desarrolladores se encuentran con comportamientos inesperados al intentar implementar js detectar cerrar pestañas borrar sesionstorage. Aunque la teoría dice que el sessionStorage se elimina al terminar la sesión (cerrar la pestaña), en la práctica, la persistencia al recargar la página o la “restauración de sesión” de los navegadores modernos pueden causar problemas de seguridad o lógica en tu aplicación.

En este artículo, vamos a desglosar cómo detectar realmente estos eventos y cuál es la forma más fiable de gestionar la limpieza de datos.

El comportamiento nativo de sessionStorage

Antes de escribir código, recuerda que sessionStorage:

  1. Sobrevive a las recargas de página (F5).
  2. Está limitado a la pestaña actual (no se comparte entre ventanas).
  3. Debería borrarse cuando la pestaña o ventana se cierra definitivamente.

Si necesitas forzar este borrado o ejecutar una acción (como un logout en tu API) justo antes de que el usuario se vaya, necesitas los siguientes eventos.

Método 1: Evento beforeunload (El clásico)

El evento beforeunload se dispara justo antes de que el usuario abandone la página. Es útil para advertir sobre cambios no guardados o para limpiezas rápidas.

Ejemplo de implementación:

window.addEventListener('beforeunload', (event) => {
    // Intentar limpiar sessionStorage
    sessionStorage.clear();
    
    // Nota: Algunos navegadores ignoran el clear() aquí por razones de seguridad
    // si el proceso de cierre es muy rápido.
});

Limitaciones de beforeunload

  • Bloqueo de UI: No puedes mostrar alertas personalizadas (alert o confirm).
  • Inconsistencia: En navegadores móviles (iOS/Android), este evento a veces no se dispara para ahorrar batería o recursos.

Método 2: visibilitychange y pagehide (El estándar moderno)

Hoy en día, la W3C recomienda usar visibilitychange o pagehide porque son más consistentes con el ciclo de vida de la página moderna (especialmente en móviles).

EventoCuándo usarloFiabilidad
visibilitychangeCuando el usuario cambia de pestaña o minimiza.Alta
pagehideCuando la sesión de la página se oculta o cierra.Muy Alta
beforeunloadPara procesos de limpieza antes del cierre.Media

Código funcional: Limpieza selectiva al salir

Si quieres borrar sessionStorage al cerrar pestaña pero evitar que se borre al recargar (refresh), puedes usar un pequeño truco comparando estados:

// Detectar si la página se está ocultando o cerrando permanentemente
window.addEventListener('pagehide', (event) => {
    if (event.persisted) {
        // La página se guardó en caché (BFCache), no borrar nada aún
        return;
    }
    // Si llegamos aquí, el usuario está cerrando la pestaña
    sessionStorage.removeItem('mi_token_seguro');
    console.log('Datos de sesión limpiados');
});

¿Por qué no se borran los datos a veces?

Si notas que el usuario vuelve y los datos siguen ahí, puede deberse a:

  1. Restauración automática: Chrome y Edge tienen funciones para “continuar donde te quedaste” que preservan el estado.
  2. Múltiples pestañas del mismo dominio: Si el usuario tiene otra pestaña abierta con la misma URL, el contexto de la sesión puede persistir en algunos casos de navegación interna.
  3. BFCache: Los navegadores guardan una copia “congelada” de la página para que el botón “Atrás” sea instantáneo. Usa el evento pagehide para manejar esto.

Errores comunes al intentar detectar el cierre

  • Peticiones Asíncronas: Intentar hacer un fetch normal dentro de beforeunload. El navegador cancelará la petición antes de que termine. Usa navigator.sendBeacon() para enviar datos finales al servidor.
  • Confundir con localStorage: Recuerda que localStorage NUNCA se borra automáticamente al cerrar la pestaña.
  • No considerar móviles: En smartphones, cerrar la aplicación no siempre dispara el evento de cierre de pestaña de la misma forma que en escritorio.

Artículos relacionados