Reemplazar un estado del History API

En el anterior artículo hemos visto por qué se añaden estados dentro del historial del navegador en las aplicaciones SPA (Single Page Application) y cómo podemos controlarlos, en este caso vamos a ver cómo podemos reemplazar un estado del History API para asignarle nuevos valores.

Y es que como vimos, al realizar una inserción del estado mediante el método .pushState() el primer parámetro era un objeto JSON con información que fuese relevante para el estado y sobre todo que permitiese, una vez retornado al estado, el reproducirlo.

Insertar un estado con pushState

Así podemos partir de haber insertado el siguiente estado dentro de nuestro documento HTML5:

history.pushState(
  {page: 1, section: "inicio"},
  "Página Inicio",
  "/inicio"
);

Vemos que el primer parámetro es el objeto asociado al estado. Pero si recordamos la secuencia de estados, cuando cargamos un documento en primer lugar, este no tiene un objeto JSON asociado.

El método replaceState

En este caso podemos recurrir al método .replaceState(). Este método nos va a servir para cambiar el estado en el que nos encontramos actualmente. Bien sea para cambiar el primer estado del documento que no tiene objeto JSON asociado o bien sea para cambiar cualquier otro estado del historial.

La sintaxis del método .replaceState() es la misma que la del método .pushState().

history.replaceState(objetoEstado, titulo, url);

Reemplazar el estado actual

De esta forma podemos modificar el estado actual de un documento HTML5 escribiendo lo siguiente:

history.replaceState(
  {page: 0, section: "home"},
  "Página Principal",
  "/"
);

Ejemplo completo

Si queremos ver la secuencia que nos ayuda a reemplazar un estado del History API ejecutaríamos el siguiente código:

// Al cargar la página, reemplazamos el estado inicial
history.replaceState(
  {page: 0, section: "home"},
  "Página Principal",
  "/"
);

// Añadimos un nuevo estado
history.pushState(
  {page: 1, section: "productos"},
  "Productos",
  "/productos"
);

// Verificamos el estado actual
console.log(history.state); // {page: 1, section: "productos"}

// Podemos reemplazar el estado actual
history.replaceState(
  {page: 1, section: "productos", filtro: "activos"},
  "Productos Activos",
  "/productos?filtro=activos"
);

console.log(history.state); // {page: 1, section: "productos", filtro: "activos"}

Con esto hemos visto lo útil que es el uso del replaceState para reemplazar un estado del History API y sobre todo para dar un contexto al primer estado del documento sin añadir una nueva entrada al historial del navegador.