Objeto History: Navegación y Gestión del Historial

Método back()

El método history.back() navega a la página anterior en el historial de la sesión. Si no hay una página anterior (es decir, el usuario está en la primera página visitada), el método no hace nada. Esto es idéntico a presionar el botón atrás del navegador.

El método back() es útil para crear botones personalizados de navegación atrás en tu aplicación. Por ejemplo, puedes agregar un botón "Volver" en una página de detalle de producto que lleve al usuario a la página anterior.

Método forward()

El método history.forward() navega a la página siguiente en el historial de la sesión. Esto solo funciona si el usuario ha navegado hacia atrás previamente. Si no hay una página siguiente en el historial, el método no hace nada. Es menos común que back(), pero útil en interfaces de navegación personalizadas.

En aplicaciones móviles, incluir botones de navegación personalizados es importante ya que muchos dispositivos no tienen botones físicos. Los métodos back() y forward() son perfectos para implementar esta funcionalidad.

Parámetros del Método go()

El parámetro del método go() determina cuántas entradas del historial navegar. Por ejemplo, go(-1) es equivalente a back(), go(1) es equivalente a forward(), y go(-2) navega dos páginas atrás.

El método go() es especialmente útil cuando necesitas navegar múltiples pasos en el historial. Por ejemplo, en un formulario de varios pasos, puedes usar go(-3) para regresar al inicio del formulario desde el paso final.

Recargar la Página con go(0)

El método history.go(0) recarga la página actual, equivalente a location.reload(). Aunque funciona, es más común usar location.reload() para recargar páginas. Un punto importante: si el valor pasado a go() excede los límites del historial (por ejemplo, go(-100) cuando solo has visitado 5 páginas), el método simplemente no hará nada, sin lanzar error.

Propiedad length

La propiedad history.length devuelve el número de entradas en el historial de la sesión actual. Esto incluye la página actual más todas las páginas que el usuario puede navegar usando back() o forward(). El valor mínimo es 1 (la página actual).

La propiedad length es útil para determinar si el usuario puede navegar atrás o adelante. Por ejemplo, puedes deshabilitar un botón de navegación atrás si length es 1, lo que indica que no hay páginas anteriores en el historial.

Propiedad state

La propiedad history.state devuelve el objeto de estado asociado con la entrada actual del historial. Este estado es el que se pasó como primer parámetro a pushState() o replaceState(). Si no se ha establecido ningún estado, el valor es null.

La propiedad state es fundamental para implementar SPAs. Permite guardar el estado de la aplicación en cada entrada del historial. Importante: siempre usa objetos serializables (JSON) para el estado. Evita pasar funciones, DOM nodes u objetos no serializables, ya que estos no se guardarán correctamente.

• <strong>Objetos simples:</strong> { page: 'products', filter: 'active' }
• <strong>Arrays:</strong> ['item1', 'item2', 'item3']
• <strong>Números y strings:</strong> Valores primitivos serializables
• <strong>Evitar funciones:</strong> No se pueden serializar a JSON
• <strong>Evitar DOM nodes:</strong> Referencias a elementos del DOM no funcionan
• <strong>Tamaño moderado:</strong> Objetos grandes afectan el rendimiento

Sintaxis de pushState()

El método pushState() acepta tres parámetros: un objeto de estado (que se puede recuperar usando history.state), un título (que actualmente es ignorado por la mayoría de los navegadores), y una URL opcional (que puede ser absoluta o relativa).

Cuando llamas a pushState(), la URL del navegador cambia a la URL especificada, pero la página no se recarga. Esto crea una nueva entrada en el historial, lo que significa que el usuario puede navegar atrás usando el botón atrás del navegador o history.back().

pushState() en SPAs

En aplicaciones de una sola página, pushState() se usa para cambiar la URL cuando el usuario navega a una nueva "página" de la aplicación. Esto permite que cada "página" tenga su propia URL única, lo que mejora la usabilidad y el SEO.

Este patrón es común en frameworks como React Router y Vue Router. Cuando el usuario navega a una nueva ruta, el framework usa pushState() para cambiar la URL sin recargar la página. Usa pushState() para crear URLs amigables como /products/123 en lugar de hashes como #/products/123, mejorando la legibilidad y el SEO.

Sintaxis de replaceState()

Al igual que pushState(), replaceState() acepta tres parámetros: un objeto de estado, un título (ignorado), y una URL opcional. La diferencia es que replaceState() modifica la entrada actual del historial en lugar de crear una nueva.

replaceState() es útil cuando quieres cambiar la URL y el estado sin que el usuario pueda navegar atrás. Por ejemplo, después de que un usuario se autentica, puedes reemplazar la URL de login con la URL del dashboard.

Cuándo Usar replaceState()

replaceState() es ideal para situaciones donde no quieres que el usuario pueda navegar atrás a una página anterior. Esto incluye redirecciones, autenticación, y correcciones de URL.

Este patrón es común en aplicaciones donde después de una acción importante (como enviar un formulario o completar un proceso), no quieres que el usuario pueda navegar atrás. Sin embargo, ten cuidado: los usuarios esperan poder navegar atrás en la web. Solo usa replaceState() cuando realmente no quieras que el usuario pueda regresar a la página anterior, como después de autenticación o envío de formularios.

Escuchar el Evento popstate

Para escuchar el evento popstate, agregas un event listener al objeto window. El evento incluye una propiedad state que contiene el objeto de estado de la entrada del historial a la que se navegó.

El evento popstate es fundamental para implementar SPAs. Cuando el usuario navega atrás o adelante, el evento popstate te permite actualizar la interfaz de usuario para reflejar el estado correspondiente a la nueva entrada del historial.

pushState() y replaceState() No Disparan popstate

Es importante entender que pushState() y replaceState() NO disparan el evento popstate. El evento popstate solo se dispara cuando el usuario navega por el historial existente, no cuando se agrega o reemplaza una entrada.

Este comportamiento es importante de entender. Si necesitas actualizar la interfaz después de llamar a pushState() o replaceState(), debes hacerlo manualmente. El evento popstate solo se disparará cuando el usuario navegue atrás o adelante usando los botones del navegador o history.back()/forward()/go(). Siempre verifica event.state en el handler de popstate: si es null, significa que el usuario navegó a una página sin estado asociado.

URL Inválida en pushState()

Si intentas usar pushState() o replaceState() con una URL inválida, JavaScript lanzará un error. La URL debe ser del mismo origen que la página actual, o ser una URL relativa válida.

Siempre verifica que la URL sea válida antes de llamar a pushState() o replaceState(). Usa try/catch para manejar errores y evitar que la aplicación se rompa.

Estado No Serializable

Si intentas pasar un estado no serializable (como una función o un DOM node) a pushState() o replaceState(), el navegador lanzará un error. El estado debe ser un objeto serializable como JSON. Además, evita guardar objetos muy grandes o complejos: el navegador tiene límites en el tamaño del estado, y objetos grandes afectan el rendimiento de la navegación.

Siempre usa objetos serializables para el estado. Si necesitas guardar información compleja, conviértela a un formato serializable antes de pasarla a pushState() o replaceState(). Por ejemplo, si tienes una instancia de clase, extrae solo las propiedades necesarias como un objeto plano.