Objecte history

L'objecte history de JavaScript és l'altre component clau per gestionar la navegació i l'experiència de l'usuari dins d'una aplicació web. History forma part del BOM (Browser Object Model) i proporciona accés a les sessions de l'historial del navegador, permetent-te navegar cap endavant i cap enrere dins de les pàgines visitades per l'usuari a la pestanya actual.

Es pot accedir-hi mitjançant window.history o simplement history.

Propietats de history

L'objecte history té dues propietats principals, ambdues de només lectura.

Mètodes de history

Els mètodes de history es divideixen en dues categories: navegació tradicional i manipulació de l'historial (clau per a les Single Page Applications - SPAs).

 

Mètodes de Navegació

Aquests mètodes simulen la pulsació dels botons "Enrere" i "Endavant" del navegador.

 

Mètodes de manipulació historial (HTML5 History API)

Aquests són els mètodes més potents i s'utilitzen per canviar l'URL (i, per tant, l'estat) sense recarregar la pàgina, cosa essencial per a les SPAs.

Paràmetres per a pushState i replaceState:

Exemples i casos d'ús

1. Navegació Bàsica

Simplement movent-se per l'historial.

// Retorna a la pàgina anterior
function anarEnrere() {
    history.back();
}

// Recarrega la pàgina actual amb un truc
function recarregar() {
    history.go(0);
}

// Torna dues pàgines enrere (útil si vols forçar l'usuari a saltar una transició)
setTimeout(() => {
    history.go(-2);
}, 5000);

 

2. Single Page Applications (SPAs) amb pushState()

Aquest és el cas d'ús més important de l'API History. Quan un usuari fa clic a un enllaç en una SPA, normalment carregues contingut nou amb AJAX sense recarregar. Però vols que la barra d'adreces mostri la URL correcta (/usuari/perfil) i que els botons Enrere/Endavant funcionin.

function carregarPerfilUsuari(id) {
    // 1. Carregar les dades de l'usuari amb AJAX o Fetch
    // ... (Codi per actualitzar la interfície d'usuari) ...
    
    const nouEstat = {
        userId: id,
        vista: 'perfil'
    };
    const novaURL = `/usuari/${id}`;
    
    // 2. Afegir una nova entrada a l'historial sense recarregar la pàgina
    history.pushState(nouEstat, 'Pàgina de Perfil', novaURL);

    console.log(`Nova entrada a l'historial: ${novaURL}`);
}

// Exemple d'ús:
// L'URL actual és: https://meuweb.cat/inici
carregarPerfilUsuari(101);
// La nova URL a la barra d'adreces és: https://meuweb.cat/usuari/101
// La pàgina NO s'ha recarregat.

 

3. Modificació de l'estat actual amb replaceState()

S'utilitza per actualitzar l'estat de l'entrada actual (per exemple, un filtre de cerca) sense crear una nova entrada a l'historial.

function aplicarFiltre(criteri) {
    // 1. Carregar les dades filtrades
    // ... (Codi per actualitzar la llista de productes) ...
    
    const nouEstat = {
        criteriFiltre: criteri,
        timestamp: Date.now()
    };
    const novaURL = `/?filtre=${criteri}`;

    // 2. Modificar l'entrada ACTUAL de l'historial.
    history.replaceState(nouEstat, 'Productes Filtrats', novaURL);

    console.log(`Estat de l'historial actualitzat a: ${criteri}`);
}

// L'usuari fa una cerca:
aplicarFiltre('ofertes'); 
// La URL canvia a: /?filtre=ofertes. No es crea una nova entrada a l'historial.

 

4. Gestió de l'esdeveniment popstate

Quan l'usuari fa clic als botons "Enrere" o "Endavant" del navegador, es dispara l'esdeveniment popstate. Aquest esdeveniment és vital en SPAs per carregar el contingut correcte.

window.addEventListener('popstate', (event) => {
    // L'objecte state conté les dades que vas passar amb pushState() o replaceState()
    const estatAnterior = event.state; 

    if (estatAnterior && estatAnterior.vista === 'perfil') {
        console.log(`Tornant al perfil de l'usuari ${estatAnterior.userId}`);
        // Codi per carregar el perfil usant les dades de l'estat.
    } else {
        console.log("Tornant a una pàgina bàsica (o la pàgina d'inici)");
        // Codi per gestionar la navegació a una URL que no té un estat personalitzat.
    }
    
    console.log(`L'URL actual és: ${location.pathname + location.search}`);
});

Aquest cicle de pushState() + popstate és el que permet que les aplicacions modernes (com Gmail, Twitter, o qualsevol framework de frontend com React, Vue o Angular) gestionin les rutes sense recàrregues completes, oferint una experiència d'usuari ràpida i fluida.

La funció addEventListener() és un mètode fonamental de JavaScript que permet registrar una funció (el listener o gestor d'esdeveniments) que serà cridada cada vegada que un esdeveniment especificat (com un clic de ratolí, una pulsació de tecla, o una càrrega de pàgina) succeeixi sobre un objecte concret del DOM (Document Object Model), com un botó, un formulari, o l'objecte window. Aquesta funció pren típicament tres arguments: el tipus d'esdeveniment (p. ex., 'click'), la funció a executar quan l'esdeveniment passa, i opcionalment, un booleà o objecte per definir si la captura s'ha de fer durant la fase de captura o de bombolleig (sent la fase de bombolleig l'opció per defecte), permetent una programació no intrusiva i mantenint la lògica de JavaScript separada de l'estructura HTML.