La API de historia

La API de historial es la forma en que los navegadores le permiten interactuar con la barra de direcciones y el historial de navegación.

Introducción

La API de historial te permiteinteractuar con el historial del navegador,activar los métodos de navegación del navegadorycambiar el contenido de la barra de direcciones.

Es especialmente útil en combinación con las aplicaciones modernas de una sola página, en las que nunca realiza una solicitud del lado del servidor para nuevas páginas, sino que la página es siempre la misma: solo cambia el contenido interno.

Aaplicación JavaScript modernaejecutar en el navegador que no interactúa con la API de historial, ya sea explícitamente o en el nivel del marco, será una mala experiencia para el usuario, ya quelos botones de avance y retroceso se rompen.

Además, al navegar por la aplicación,la vista cambia pero la barra de direcciones no.

Y tambiénel botón de recarga se rompe: recargar la página, dado que no hay enlaces profundos, hará que el navegador muestre una página diferente

La API de historial se introdujo en HTML5 y ahoracompatible con todos los navegadores modernos. IE lo admite desde la versión 10, y si necesita admitir IE9 y versiones anteriores, use elBiblioteca history.js.

Accede a la API de historial

La API de historial está disponible enwindowobjeto, por lo que puede llamarlo así:window.historyohistory, ya quewindowes el objeto global.

The History object

Comencemos con lo más simple que puede hacer con la API de historial.

Vuelve a la pagina anterior:

history.back()

esto va a la entrada anterior en el historial de la sesión. Puede pasar a la página siguiente usando

history.forward()

Esto es exactamente como usar los botones de avance y retroceso del navegador.

go()le permite navegar hacia atrás o hacia adelante en varios niveles de profundidad. Por ejemplo

history.go(-1) //equivalent to history.back()
history.go(-2) //equivalent to calling history.back() twice
history.go(1) //equivalent to history.forward()
history.go(3) //equivalent to calling history.forward() 3 times

Para saber cuántas entradas hay en el historial, puede llamar

history.length

Agregar una entrada al historial

UsandopushState()puede crear una nueva entrada de historial mediante programación. Pasas 3 parámetros.

El primero es un objeto que puede contener cualquier cosa (sin embargo, hay un límite de tamaño y el objeto debe ser serializable).

El segundo parámetro no lo utilizan actualmente los principales navegadores, por lo que generalmente pasa una cadena vacía.

El tercer parámetro es una URL asociada al nuevo estado. Tenga en cuenta que la URL debe pertenecer al mismo dominio de origen de la URL actual.

const state = { name: 'Flavio' }
history.pushState(state, '', '/user')

Llamar a esto no cambiará el contenido de la página y no causa ninguna acción del navegador como cambiarwindow.locationharía.

Modificar las entradas del historial

MientraspushState()le permite agregar un nuevo estado al historial,replaceState()le permite editar el estado actual del historial.

history.pushState({}, '', '/posts')
const state = { post: 'first' }
history.pushState(state, '', '/post/first')
const state = { post: 'second' }
history.replaceState(state, '', '/post/second')

Si ahora llamas

history.back()

el navegador va directamente a/posts, ya que/post/firstestabasustituidopor/post/second

Acceder al estado actual de la entrada del historial

Accediendo a la propiedad

history.state

devuelve el objeto de estado actual (el primer parámetro pasado apushStateoreplaceState).

losonpopstateevento

Este evento es convocadowindowcada vez que cambia el estado del historial activo, con el estado actual como parámetro de devolución de llamada:

window.onpopstate = event => {
  console.log(event.state)
}

registrará el nuevo objeto de estado (el primer parámetro pasado apushStateoreplaceState) cada vez que llamashistory.back(),history.forward()ohistory.go().


Más tutoriales de navegador: