History API

Search…
History API
El History API nos permite cambiar la URL del navegador sin refrescar la página, ver el número de URL's visitadas (la historia) y navegar por la historia de URL's (ir atrás o adelante).
El History API es muy útil en aplicaciones que nunca se refrescan, también conocidas como SPAs (Single Page Applications).
El objeto principal para utilizar el History API se llama history.
Cambiando la ruta de la URL
Para cambiar la ruta de la URL utiliza los métodos pushState y replaceState de history.
La diferencia entre los dos métodos es que pushState agrega una entrada a la historia de URLs mientras que replaceState reemplaza la última entrada.
pushState y replaceState reciben tres argumentos: un objeto, un título y la nueva ruta.
// agrega una ruta /users a la historia de la sesión
history.pushState(null, null, "users");
Puedes abrir la consola en las herramientas del desarrollador y ejecutar esa línea sobre cualquier sitio o aplicación Web. La ruta de la URL debería cambiar a /users.
Atrás y adelante
Para navegar en la historia utiliza los métodos back y forward del objeto history. Es lo equivalente a oprimir el botón atrás o adelante del navegador.
// equivalente a oprimir el botón de atrás del navegador
history.back();
​
// equivalente a oprimir el botón de adelante del navegador
history.forward();
Eventos sobre la historia
Cuando una persona oprime el botón atrás o adelante, o se ejecutan los métodos back y forward del history, se dispara el evento popstate sobre window:
window.onpopstate = function(e) {
  alert("location: " + document.location + ", state: " + JSON.stringify(e.state));
};
Local Storage
Canvas
Last modified 2yr ago
Copy link
On this page
Cambiando la ruta de la URL
Atrás y adelante
Eventos sobre la historia