La capacidad de gestionar estados del historial con HTML5 es uno de los grandes cambios que se producen en el objeto history con la llegada del API History.
Pero, ¿Qué son los estados del historial? y ¿Por qué aparece ese concepto? En los inicios el objeto history nos permitía navegar hacía delante y hacía atrás por las URL que se había insertado en el historial con métodos como .go(), forward() y back(). Algo sencillo que podía resolver una navegación básica.
Con el paso del tiempo el diseño de las páginas cambió a lo que se conoce como modelos SPA (Single Page Application). Es decir, tenemos una sola página en el cliente y la voy modificando con datos que recupero de forma asíncrona (peticiones AJAX) y generando nuevos componentes de forma visual.
Lo que sucedía en este caso es que el usuario tenía la sensación de que navegaba, ya que cambiaba visualmente de componentes y datos, pero en el fondo la URL del navegador era la misma y el objeto history no se veía afectado.
El problema aparecía cuando el usuario acostumbrado a volver atrás o desplazarse adelante con los botones del navegador, ejecutaba dicha acción. En ese momento la aplicación SPA desaparecía. Además se añadía el problema de que no podía guardar la URL para volver a ella en otro momento, para volver a ese estado. Este último punto se subsanaría añadiendo anclas o el elemento hash (#) al window.location de la página según se modificaba la aplicación SPA.
Con todo este marco en HTML5 se decide modificar el API History para que se pueda añadir estados.
Entonces, ¿Qué es un estado?. Un estado representa cada acción que el usuario realiza en la página que suponga una navegación. De esta manera esa acción puede ser añadida al historial mediante el método history.pushState.
La sintaxis de método history.pushState es:
history.pushState(objeto_estado, titulo, url);
Dónde lo que le pasamos son:
- objeto_estado, es un objeto JSON que contiene toda la información necesaria para reproducir el estado. Por ejemplo imaginemos que mediante AJAX estamos recuperando datos en asíncrono de un «tipo de producto» y de un «lugar», pues esos dos datos «producto» y «lugar» pueden ser almacenados en el objeto estado.
- titulo, sería el título que tiene el estado
- url, sería la URL, incluida con el hash (#) para poder manejar la URL del navegador que así pueda ser extraída y guardada por el usuario de forma externa.
De esta forma podemos gestionar estados del Historial con HTML5 incluyendo uno nuevo, de la siguiente forma:
history.pushState({ pagina: "2" }, "Titulo 2", "history-states.html#p2");
Si lo que queremos es recuperar la información del estado en el que estamos actualmente bastará con leer la propiedad history.state
console.log(JSON.stringify(history.state));
Lo importante es que ahora, si el usuario utiliza la navegación, el estado va a ser un elemento más de ella y por lo tanto no tendrá los efectos colaterales que se producían anteriormente en las aplicaciones SPA.
Con esto hemos visto la utilidad de gestionar estados del Historial con HTML5 para que podamos construir aplicaciones SPA robustas utilizando el API History.
