Una de las cosas nuevas que nos ofrece HTML5 es la posibilidad de gestionar el cambio de estado en el Historial. Es decir, controlar cada vez que el usuario pulse los botones de back o forward del navegador. O bien si lo estamos haciendo de forma programática desde el API History mediante los métodos .go(), .forward() o .back().
Esto nos va a dar un gran control sobre la navegación del usuario. Sobre todo si estamos trabajando con aplicaciones que carguen datos de forma asíncrona y que estén creando nuevos estados.
Para gestionar el cambio de estado en el historial en HTML5 se nos ofrece el evento popstate, evento que se lanzará sobre el objeto window del navegador.
Así lo que tendremos que hacer es crear un manejador de eventos sobre dicho evento. Es decir, asociarle una función para cada vez que se invoque.
window.onpopstate = function(event) {
console.log("Te has desplazado a " + JSON.stringify(event.state));
};
Vemos que cada vez que hay un cambio de estado en el historial lanzamos este mensaje por consola. En la información recibida por el evento nos encontramos el estado al que hemos navegado. Es por ello que podemos acceder a la propiedad event.state la cual nos dará dicha información.
Ahora, para ver el efecto de gestionar el evento solo nos quedará el crear o simular que se están añadiendo estados al historial del navegador. Para ello nos vamos a apoyar en el método .pushState(), el cual recibe tres parámetros: el estado en sí, que se representa mediante un objeto JSON en el cual podemos incluir la información de estado que queramos, el título del estado y por último el location de dicho estado.
history.pushState({ pagina: "1" }, "Titulo 1", "history-states-event.html#p1");
console.log("Hemos añadido el estado " + JSON.stringify(history.state));
Hay que apreciar que el location suele estar asociado a la misma página con un anchor con el código del estado. Esto nos sirve para poder simular navegaciones sobre elementos asíncronos dentro de la misma página. Pero ya entraremos en detalle sobre esto en otro artículo.
Ahora ya se puede uno mover hacía delante o hacía atrás en el historial para poder ver el efecto del método onpopstate y cómo controla el cambio de estados en el historial del navegador.
Con esto ya hemos visto cómo podemos gestiona el cambio de estado en el historial de nuestro navegador y así pasar a dar una nueva experiencia al usuario.
