El Atributo ONPOPSTATE

El atributo onpopstate permite manejar cambios en el historial del navegador, especialmente útil en aplicaciones web modernas.

El atributo onpopstate permite manejar cambios en el historial del navegador, especialmente útil en aplicaciones web modernas (SPA) para gestionar la navegación sin recargas de página.

Para qué sirve:

Detectar navegación con botones "Atrás/Adelante"
Recuperar estados de la aplicación
Sincronizar la UI con la URL actual
Implementar navegación dinámica

???? Sintaxis Básica

<!-- En HTML -->
<body onpopstate="miFuncion(event)">

Run HTML

// En JavaScript
window.onpopstate = function(event) {
    // Lógica aquí
};

// O usando addEventListener
window.addEventListener('popstate', (event) => {
    // Lógica aquí
});

???? Ejemplos Prácticos

1. Registro Básico de Navegación

<body onpopstate="mostrarEstado(event)">
    <button onclick="navegar('pagina1')">Página 1</button>
    <div id="contenido"></div>
</body>

<script>
let historial = [];

function navegar(pagina) {
    const estado = { pagina, timestamp: Date.now() };
    historial.push(estado);
    history.pushState(estado, '', `?pagina=${pagina}`);
    actualizarContenido(pagina);
}

function mostrarEstado(event) {
    const estado = event.state;
    console.log('Estado recuperado:', estado);
    if (estado) actualizarContenido(estado.pagina);
}

function actualizarContenido(pagina) {
    document.getElementById('contenido').innerHTML = `
        <h2>${pagina.toUpperCase()}</h2>
        <p>Cargado: ${new Date().toLocaleTimeString()}</p>
    `;
}

// Manejar carga inicial
window.onload = () => {
    const urlParams = new URLSearchParams(window.location.search);
    const pagina = urlParams.get('pagina') || 'inicio';
    history.replaceState({ pagina }, '', `?pagina=${pagina}`);
    actualizarContenido(pagina);
};
</script>

Run HTML

2. Sistema de Navegación Avanzado (SPA)

<div id="app">
    <nav>
        <a href="#home" onclick="cargarSeccion('home')">Inicio</a>
        <a href="#about" onclick="cargarSeccion('about')">Acerca de</a>
    </nav>
    <div id="seccion"></div>
</div>

<script>
const secciones = {
    home: '<h2>Bienvenido</h2><p>Contenido principal...</p>',
    about: '<h2>Sobre Nosotros</h2><p>Información de la empresa...</p>'
};

function cargarSeccion(seccion, pushState = true) {
    document.getElementById('seccion').innerHTML = secciones[seccion];
    if(pushState) {
        history.pushState({ seccion }, '', `#${seccion}`);
    }
}

window.onpopstate = (event) => {
    if(event.state) {
        cargarSeccion(event.state.seccion, false);
    }
};

// Inicialización
window.addEventListener('load', () => {
    const hash = window.location.hash.substring(1) || 'home';
    history.replaceState({ seccion: hash }, '', `#${hash}`);
    cargarSeccion(hash, false);
});
</script>

Run HTML

???? Funcionamiento Clave

history.pushState(): Añade una entrada al historial
javascript

Copy
```
history.pushState(estado, título, url);
```

event.state: Contiene el estado almacenado

event.state?.pagina // Acceder a propiedades del estado

history.replaceState(): Modifica la entrada actual
javascript

Copy
```
history.replaceState(estadoActualizado, '', url);
```

???? Consideraciones Importantes

Seguridad:
- El mismo origen: Solo puedes modificar el historial de tu propio dominio
- Límites de tamaño del estado: Generalmente ~640k por entrada
Compatibilidad:

Navegador Soporte

Chrome ✅ 5+

Firefox ✅ 4+

Safari ✅ 6+

Edge ✅ 12+
Mejores Prácticas:
- Usar replaceState para la carga inicial
- Validar siempre event.state (puede ser null)
- Codificar/decodificar datos complejos con JSON.stringify/JSON.parse

Navegador	Soporte
Chrome	✅ 5+
Firefox	✅ 4+
Safari	✅ 6+
Edge	✅ 12+

???? Casos de Uso Avanzados

Formularios Multi-paso:

history.pushState({ paso: 2, datos: {...} }, '', '?paso=2');

Búsquedas Filtradas:

function aplicarFiltros(filtros) {
    history.pushState({ filtros }, '', `?${new URLSearchParams(filtros)}`);
    cargarResultados(filtros);
}

Sistema de Deshacer/Rehacer:

let historial = [];
let posicionActual = -1;

function guardarEstado(estado) {
    historial = historial.slice(0, posicionActual + 1);
    historial.push(JSON.stringify(estado));
    posicionActual++;
}

⚠️ Errores Comunes

Estado Demasiado Grande:

// Mal
history.pushState({ datosMasivos }, '', url);

// Bien
const datosEsenciales = { id: 123, pag: 'home' };
history.pushState(datosEsenciales, '', url);

No Manejar la Carga Inicial:

// Agregar al cargar la página
window.addEventListener('load', () => {
    history.replaceState(estadoInicial, '', window.location.href);
});

???? Conclusión

El atributo onpopstate es fundamental para:

Crear SPAs profesionales
Mantener el estado de la aplicación
Mejorar la experiencia de navegación
Implementar características complejas de historial

Ejemplo Final Avanzado:

// Sistema de navegación con caché
const cache = new Map();

window.onpopstate = async (event) => {
    const { seccion } = event.state || {};
    if(seccion) {
        if(cache.has(seccion)) {
            mostrarContenido(cache.get(seccion));
        } else {
            const contenido = await cargarContenidoRemoto(seccion);
            cache.set(seccion, contenido);
            mostrarContenido(contenido);
        }
    }
};

Con este conocimiento, podrás crear aplicaciones web más interactivas y responsivas. ¡Experimenta con diferentes implementaciones! ????