¿Cómo se puede gestionar la historia del navegador en JavaScript, desplazándose hacia adelante y hacia atrás?

El objeto history proporciona acceso al historial de sesiones del navegador. Los métodos principales para gestionar son:

• history.back(): Retrocede una página en el historial.
• history.forward(): Avanza una página en el historial.
• history.go(delta): Se desplaza a la cantidad de pasos especificada en el historial (delta puede ser negativo para retroceder).

Ejemplo de uso:

// Volver a la página anterior
history.back();

// Ir a la siguiente página
history.forward();

// Volver dos páginas atrás
history.go(-2);

// Avanzar tres páginas
history.go(3);

También, el objeto history permite gestionar el estado del historial sin recargar la página, usando los métodos pushState y replaceState.

• history.pushState(state, title, url): Añade un nuevo estado al historial de la sesión.
  • state: Objeto de estado asociado a la entrada del historial.
  • title: Título de la página (la mayoría de los navegadores lo ignoran).
  • url: URL asociado a la entrada del historial.
• history.replaceState(state, title, url): Reemplaza el estado actual en el historial de la sesión.

Ejemplo con pushState:

// Añadir un nuevo estado al historial
history.pushState({ page: 1 }, "Página 1", "/page1");

// Realizar acciones en la página sin recargar completamente

// Cuando el usuario pulse el botón "atrás", se activará el evento popstate
window.addEventListener('popstate', function(event) {
  console.log('El estado ha cambiado:', event.state); // { page: 1 }
  // Actualizar el contenido de la página según el estado
});

Ejemplo con replaceState:

// Reemplazar el estado actual en el historial
history.replaceState({ tab: 'active' }, "Pestaña activa", "/active-tab");

El evento popstate se activa cuando se activa una entrada en el historial de la sesión.