En un HTML documento, el history.pushState() El método agrega una entrada a la pila del historial de sesiones del navegador.

Sintaxis

history.pushState(state, title [, url])

Parámetros

state
los state El objeto es un objeto de JavaScript que está asociado con la nueva entrada del historial creada por pushState(). Siempre que el usuario navegue a la nueva state, a popstate evento se dispara, y el state La propiedad del evento contiene una copia de la entrada del historial. state objeto.
los state El objeto puede ser cualquier cosa que se pueda serializar. Porque Firefox guarda state objetos en el disco del usuario para que se puedan restaurar después de que el usuario reinicie el navegador, imponemos un límite de tamaño de 2 MiB en la representación serializada de un state objeto. Si pasa un state objeto cuya representación serializada es más grande que esto para pushState(), el método lanzará una excepción. Si necesita más espacio que este, le recomendamos que utilice sessionStorage y / o localStorage.
title
La mayoría de los navegadores ignoran actualmente este parámetro., aunque es posible que lo utilicen en el futuro. Pasando el vacío string aquí debería estar a salvo de futuros cambios en el método. Alternativamente, puede pasar un título corto para el estado al que se muda. Si necesita cambiar el título, puede usar document.title.
urlOpcional
Este parámetro proporciona la URL de la nueva entrada del historial. Tenga en cuenta que el navegador no intentará cargar esta URL después de una llamada a pushState(), pero podría intentar cargar la URL más tarde, por ejemplo, después de que el usuario reinicie el navegador. No es necesario que la nueva URL sea absoluta; si es relativo, se resuelve en relación con la URL actual. La nueva URL debe ser la misma origen como la URL actual; de lo contrario, pushState() lanzará una excepción. Si no se especifica este parámetro, se establece en la URL actual del documento.

Descripción

En cierto sentido, llamando pushState() es similar a configurar window.location = "#foo", en el sentido de que ambos también crearán y activarán otra entrada de historial asociada con el documento actual. Pero pushState() tiene algunas ventajas:

  • La nueva URL puede ser cualquier URL del mismo origen que la URL actual. Por el contrario, el establecimiento window.location lo mantiene en el mismo documento solo si modifica solo el hash.
  • No es necesario que cambie la URL si no lo desea. Por el contrario, el establecimiento window.location = "#foo"; solo crea una nueva entrada en el historial si el hash actual no es #foo.
  • Puede asociar datos arbitrarios con su nueva entrada de historial. Con el enfoque basado en hash, debe codificar todos los datos relevantes en un breve string.

Tenga en cuenta que pushState() nunca causa un hashchange evento que se activará, incluso si la nueva URL difiere de la anterior solo en su hash.

Ejemplos de

Esto crea una nueva entrada en el historial del navegador configurando el estado, título, y url.

JavaScript

const state ='page_id':1,'user_id':5const title =''const url ='hello-world.html'

history.pushState(state, title, url)

Cambiar un parámetro de consulta

const url =newURL(window.location);
url.searchParams.set('foo','bar');
window.history.pushState(,'', url);

Especificaciones

Especificación Estado Comentario
Estándar de vida HTML
La definición de ‘History.pushState ()’ en esa especificación.		 Estándar de vida Sin cambio de HTML5.
HTML5
La definición de ‘History.pushState ()’ en esa especificación.		 Recomendación Definición inicial.

Compatibilidad del navegador

Escritorio Móvil
Cromo Borde Firefox explorador de Internet Ópera Safari WebView Android Chrome Android Firefox para Android Opera Android Safari en IOS Internet de Samsung
pushState 5 12 4 Hasta Firefox 5, el objeto pasado se serializa usando JSON. A partir de Firefox 6, el objeto se serializa usando el algoritmo de clon estructurado. Esto permite pasar de forma segura una variedad más amplia de objetos. 10 11,5 5 ≤37 18 4 Hasta Firefox 5, el objeto pasado se serializa usando JSON. A partir de Firefox 6, el objeto se serializa usando el algoritmo de clon estructurado. Esto permite pasar con seguridad una variedad más amplia de objetos. 11,5 4 1.0
title No No No No No sí No No No No ? No

Ver también

  • Trabajar con la API de historial
  • Ventana: evento popstate