https://github.com/balupton/History.js
History.js nos proporciona 4 métodos (a mi modo de ver) principales que son:
History.pushState(data,title,url)
History.replaceState(data,title,url)
History.getState()
History.go(X)
Hay otros dos que son atajos de History.go(), éstos son History.back() (equivale a History.go(-1)) y History.forward() (equivale a History.go(1)). Tiene otros métodos, los pueden ver en el link al inicio de este mensaje, a destacar History.Adapter.bind(element,event,callback).
Lo que se tiene que pensar primeramente es en cómo funciona el historial del navegador, pensemos en éste como si fuera un array, y que la primera página cargada está en el índice 0, si el usuario avanza a una nueva página decimos que navegó al índice 1, si avanza nuevamente navegó al índice 2, etc. Si estando en el índice 4 y regresa una posición en el historial, está navegando al índice 3, y si de ahí retrocede tres posiciones estaría navegando al índice 0, estando aquí no puede ir más atrás.
Con los métodos que nos proporciona History.js podemos manejar a nuestra necesidad estos cambios en el navegador sin recargar la página.
Sin embargo la funcionalidad para que en nuestra página se vean los cambios que deseamos la debemos implementar nosotros. Es decir, al cargar X contenido con Ajax podemos usar History.pushState() para agregar un nuevo "estado" (una nueva página cargada) al historial, y nosotros haremos la funcionalidad para hacer los cambios que correspondan en nuestra página (cargar X contenido).
Manejar correctamente el historial es más complejo de lo que parece inicialmente. En mi aplicación hago uso de ColorBox (
http://jacklmoore.com/colorbox/) para mostrar ciertos contenidos. Muy parecido al visualizador de fotos actual de Facebook.
Implementé mi propia funcionalidad para navegar entre elementos (anterior, siguiente), y quiero que al cambiar de elemento se actualice la URL con History.js y que también se maneje totalmente el historial.
Lo que pretendo es que por ejemplo, si se avanza al elemento "siguiente", se debe actualizar la URL y si el usuario usa la función del navegador para regresar a la página anterior, se debería cargar el elemento previamente cargado, y si el usuario vuelve a usar mis controles para ir al elemento siguiente se debería "simular" que el usuario usó la función de su navegador para ir a la siguiente página (es decir, no agregar una nueva página al historial, sino avanzar a la siguiente).
Por el momento sólo estoy usando History.replaceState() para cambiar la URL de la página actual al cargar un elemento, sin embargo no estoy manejando el historial porque no he tenido tiempo suficiente para resolver este problema, y esto depende de cada aplicación.
Algo que recomendaría a los que tengan una aplicación similar a la mía sería que vieran el visualizador de fotos de Facebook, desplieguen el panel de Historial (estoy en Firefox, ctrl + H) y naveguen entre las fotos, así como cerrar el visualizador y presionar el botón Atrás, probar diferentes combinaciones. La forma en que lo hacen ellos es exactamente lo que yo quiero hacer.
Saludos.
