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.
Así podemos partir de haber insertado el siguiente estado dentro de nuestro documento HTML5:
history.pushState({ pagina: "3" }, "Titulo 3", "history-states.html#p3");
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.
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(objeto_json,titulo,url);
De esta forma podemos modificar el estado actual de un documento HTML5 escribiendo lo siguiente:
history.replaceState({ pagina: "1" }, "Titulo 1", "history-states-replace.html#p1");
Si queremos ver la secuencia que nos ayuda a reemplazar un estado del History API ejecutaríamos el siguiente código:
console.log("Estado inicial: " + JSON.stringify(history.state));
history.replaceState({ pagina: "1" }, "Titulo 1", "history-states-replace.html#p1");
console.log("Estado renombrado: " + JSON.stringify(history.state));
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.
