API de historial en Javascript

Actualmente está disponible en los navegadores el API history para tratar los cambios en la URL sin tener que usar el engorroso hash, además de facilitar la agregación a favoritos.

Antes se tenía que guardar el estado de la aplicación en la url a partir del carácter #, o relacionar el estado con alguna clave. Por ejemplo, si nuestra url actual era /app#01 y cambiabamos a /app#02, tendríamos un objeto javascript que guardaría los datos de la aplicación {'01': state1, '02': state2}, mediante el evento window.onhashchange cogeríamos el estado correspondiente de window.location.hash

Con la nueva API tenemos history.pushState, que recibe 3 parámetros:

• data: Un objecto que contiene el estado de nuestra aplicación.
• title: El título del item que se muestra en el historial.
• url (opcional): La nueva url que cargamos y que se muestra en la barra de direcciones.

Para tratar el historial tenemos:

window.addEventListener('popstate', function(event) {
	updateContent(event.state);
});

Con este código le pasamos a una función llamada updateContent los datos del estado de la aplicación a través de la propiedad del evento state

Si queremos reemplazar los datos del estado actual, por ejemplo, porque el usuario a actualizado un formulario, y no queremos que se añada un nuevo estado al historial, disponemos de history.replaceState

// Guardamos el estado inicial de la aplicación
history.replaceState(
	newstate,
	document.title, 
	document.location.href
);

Donde newstate es un objeto con los datos iniciales para nuestra aplicación.

Todo el proceso es transparente al usuario ya que podría parecer que se está cargando una página nueva, en vez de actualizar contenido por ajax.