El Atributo ONUNLOAD

Un evento que se activa cuando el usuario abandona una página web (cierra la pestaña, actualiza o navega a otra URL). Este evento es útil para realizar acciones de limpieza o guardar datos antes de que la página se descargue.

El atributo onunload se aplica al elemento <body> y se ejecuta cuando la página está a punto de ser cerrada o recargada.

html
Copy
<!DOCTYPE html>
<html>
<head>
    <title>Ejemplo onunload</title>
</head>
<body onunload="manejarSalida()">
    <h1>Página con evento onunload</h1>
</body>
</html>
 
Run HTML
javascript
Copy
// Método alternativo con JavaScript
window.addEventListener("unload", (event) => {
    // Lógica aquí
});

???? Casos de uso comunes

  1. Guardar datos temporales en localStorage o sessionStorage.

  2. Enviar métricas finales a un servidor (ej: tiempo de sesión).

  3. Cerrar conexiones (WebSocket, bases de datos).

  4. Limpiar caché o cookies.

???? Ejemplos prácticos

1. Guardar estado de un formulario

html
Copy
<body onunload="guardarEstadoFormulario()">
    <form id="miFormulario">
        <input type="text" id="nombre" placeholder="Nombre">
        <textarea id="comentario" placeholder="Comentario"></textarea>
    </form>
</body>

<script>
function guardarEstadoFormulario() {
    const datos = {
        nombre: document.getElementById("nombre").value,
        comentario: document.getElementById("comentario").value
    };
    localStorage.setItem("formularioAutoguardado", JSON.stringify(datos));
}
</script>
 
Run HTML

2. Enviar datos analíticos al servidor

javascript
Copy
window.addEventListener("unload", () => {
    // Usar navigator.sendBeacon para enviar datos de forma confiable
    const datos = {
        tiempoEnPagina: calcularTiempo(),
        url: window.location.href
    };
    navigator.sendBeacon("/api/analitica", JSON.stringify(datos));
});

function calcularTiempo() {
    const inicio = performance.timing.navigationStart;
    return Date.now() - inicio;
}

⚠️ Limitaciones y consideraciones

  1. Compatibilidad:

    Navegador Soporte
    Chrome ✅ Sí
    Firefox ✅ Sí
    Safari ✅ Sí
    Edge ✅ Sí

  2. Restricciones de seguridad:

    • Muchos navegadores ignoran alert() dentro de onunload.

    • Las operaciones asíncronas (como fetch) pueden no completarse.

    • Usar navigator.sendBeacon para enviar datos al servidor de forma confiable.

  3. Alternativas recomendadas:

    • onbeforeunload: Para mostrar confirmación antes de salir.

    • pagehide (Evento de la API Page Visibility): Más confiable en móviles.

???? Diferencias clave con onbeforeunload

Evento Momento de ejecución Uso típico
onbeforeunload Antes de que la página comience a descargarse Mostrar confirmación al usuario
onunload Durante la descarga de la página Limpieza silenciosa

???? Casos de uso avanzados

1. Cerrar conexiones WebSocket

javascript
Copy
let socket = new WebSocket("wss://ejemplo.com/socket");

window.addEventListener("unload", () => {
    if (socket.readyState === WebSocket.OPEN) {
        socket.close(1000, "Usuario abandonó la página");
    }
});

2. Limpieza de caché de imágenes

javascript
Copy
window.addEventListener("unload", () => {
    // Limpiar imágenes grandes no necesarias
    document.querySelectorAll("img.temporal").forEach(img => {
        URL.revokeObjectURL(img.src);
    });
});

???? Buenas prácticas

  1. Evitar operaciones sincrónicas largas: Pueden bloquear la navegación.

  2. Usar sendBeacon para analítica:

    javascript
    Copy
    navigator.sendBeacon(url, datos); // Método asíncrono y confiable

  3. No confiar en onunload para guardar crítico:

    • Algunos navegadores móviles no lo ejecutan consistentemente.

    • Usar guardado automático periódico como respaldo.

???? Conclusión

El atributo onunload es útil para:

  • Guardar datos temporales antes de abandonar la página.

  • Enviar métricas finales de uso.

  • Liberar recursos (conexiones, caché).

Ejemplo final avanzado (Sistema de autoguardado):

html
Copy
<body onunload="autoguardar()">
    <textarea id="editor"></textarea>
</body>

<script>
let intervaloAutoguardado;

function iniciar() {
    // Autoguardar cada 30 segundos
    intervaloAutoguardado = setInterval(autoguardar, 30000);
}

function autoguardar() {
    const contenido = document.getElementById("editor").value;
    localStorage.setItem("borrador", contenido);
}

window.addEventListener("unload", () => {
    clearInterval(intervaloAutoguardado); // Detener intervalo
    autoguardar(); // Último guardado
    navigator.sendBeacon("/api/guardarBorrador", contenido);
});
</script>
 
Run HTML

Nota importante: Debido a las restricciones de los navegadores modernos, se recomienda combinar onunload con otras estrategias (como guardados periódicos) para garantizar la persistencia de los datos.