En este artículo vamos a ver otro de los objetos disponibles en Javascript para controlar el navegador mediante programación. Se trata del objeto history, del que veremos su definición, propiedades, métodos y eventos disponibles.

Para explicar el Objeto history de Javascript hemos abordado los siguientes puntos de interés.

• Qué es el objeto history
• Propiedades del objeto history
• Métodos del objeto history
• Manipular el estado actual del historial
• Evento popstate
• Código de ejemplo para el trabajo con el objeto history de Javascript

Qué es el objeto history

Dentro de los objetos del navegador disponemos de varios que nos permiten controlar el cliente web y el documento mediante Javascript. El más importante es el objeto window y vinculados a él existen muchos otros que resultan también esenciales para implementar comportamientos diversos como document, location o history.

En el caso de history es un objeto que nos permite realizar el acceso al historial de navegación del usuario. Mediante este objeto podemos movernos por el historial, de modo que sería posible realizar acciones como ir a la página anterior o la página siguiente, tal como si el usuario pulsase los correspondientes botones de atrás o adelante del navegador.

Pero además permite añadir nuevos elementos al historial de manera programática o cambiar el estado del elemento actual del historial, alterando incluso la URL de la barra de direcciones pero sin refrescar la página. Estos efectos son menos habituales en los sitios web pero son esenciales para el modelo de páginas llamado Single Page Application (SPA), ya que nos permiten introducir nuevos estados en el historial, o manipular el estado actual de la URL del navegador sin recargar la página. Con ello se consigue una experiencia de usuario similar a la navegación en aplicaciones web que sólo tienen una única página.

Propiedades del objeto history

En realidad el objeto history de Javascript solamente ofrece una propiedad que sirve para obtener el número de elementos del historial del usuario. La mayoría de su funcionalidad la conseguiremos mediante los métodos que veremos seguidamente.

Propiedad length

Esta propiedad nos devuelve un entero con el número de elementos que se encuentran en el historial de navegación del usuario.

Por ejemplo, si quisiéramos ver en consola el número de páginas del historial escribiríamos esto:

console.log(window.history.length);

Igual que ocurre con todos los objetos que cuelgan de window podemos acceder al historial sin mencionar window. Por ello el siguiente código sería equivalente:

console.log(history.length);

Métodos del objeto history

Ahora vamos a ver los métodos que nos encontramos en este objeto para controlar el historial de navegación. Los vamos a ver según la funcionalidad que podemos desencadenar con ellos.

Navegar por el historial del navegador

Podemos enviar al usuario hacia atrás o adelante en el historial del navegador con los métodos history.back() y history.forward().

history.back(); // Enviaría hacia la página anterior, si hay
history.forward(); // Enviaría a la página siguiente, si hay

Pero además podemos movernos en el historial para acceder a una página que se encuentra en varias posiciones hacia delante o hacia atrás con el métoodo history.go(). A este método le podemos pasar un entero positivo o negativo. Si el argumento entero que enviamos es negativo, va hacia atrás, mientras que si es positivo, va hacia adelante.

history.go(-2);  // Navega dos páginas hacia atrás.
history.go(1);   // Navega una página hacia adelante.

Añadir elementos al historial de navegación

Es posible insertar elementos en el historial del usuario de manera programática, incluso cambiar la URL mostrada en la barra de direcciones del navegador sin que ello signifique que la página se recargue de nuevo. Para ello usamos el método history.pushState().

Esto de cambiar la URL sin que se refresque la página puede resultar un poco extraño a primera vista, pero es un mecanismo que las aplicaciones pueden utilizar para conseguir un efecto similar a la navegación por distintas páginas en aplicaciones web que tienen una sola página. Como hemos dicho anteriormente, es un modelo de funcionamiento usado comúnmente en las denominadas Single Page Application.

// Cambiar la URL sin recargar la página
window.history.pushState({}, 'Otro título para la página', '/otra/url');

Los parámetros que enviamos a pushState() son los siguientes:

• Un objeto con datos que podemos almacenar en el estado del historial. Este objeto lo podríamos descargar posteriormente cuando se recupera ese estado del historial. Si no tenemos nada podemos pasarle un objeto vacío o simplemente null. Más adelante en este artículo mostraremos un ejemplo sobre cómo recuperar ese objeto de datos.
• El título de la página de este estado del historial.
• Opcionalmente podemos indicarle una URL distinta, de modo que la barra de direcciones nos muestre una URL determinada por nosotros.

El método pushState() tiene bastante potencia y utilidades diversas para aplicaciones SPA. Puedes complementar esta información si lo deseas en el artículo El API History de HTML5.

Manipular el estado actual del historial

Además de introducir valores en el historial también podemos cambiar el estado actual, es decir, alterar mediante programación elemento del historial en el que el navegador se encuentra en un instante dado. Para ello usamos el método history.replaceState().

history.replaceState({productId: 2}, "Producto interesante", "/producto/interesante");

Ten en cuenta que este método modifica la entrada actual en el historial de navegación. Esto permite cambiar cosas como la URL mostrada en la barra de direcciones o cambiar el título de la página, incluso almacenar datos de estado en el elemento actual del historial. Todo esto lo hará sin agregar una nueva entrada al historial, sino simplemente alterando aquella en la que se encuentra el usuario. Además, este efecto se producirá sin refrescar la página.

Los parámetros del método replaceState() son los mismos que hemos indicado para pushState().

Evento popstate

Para acabar queremos abordar un evento estrechamente relacionado con el objeto de historial del navegador, llamado 'popstate'.

Este evento ocurre cuando el usuario navega a otro estado del historial, por ejemplo apretando el botón de "atrás" o "adelante" del navegador, o cuando se produce la ejecución del método history.back(), history.forward() o history.go().

Veamos un ejemplo de código para definir un manejador de evento para popstate. Simplemente mostraremos un mensaje en la consola y además realizamos un acceso al objeto de estado que se puede haber guardado en el historial de navegación mediante los métodos history.replaceState() o history.pushState().

window.addEventListener('popstate', function (event) {
  console.log('Ha cambiado el historial');
  if (event.state) {
    console.log('Hemos recibido algún estado:', event.state);
  }
});

Para aclarar posibles confusiones, cabe señalar que la ejecución de los métodos history.replaceState() o history.pushState() no disparan el evento popstate. Solo se dispara por la navegación en si producida mediante los botones de atrás o adelante o los métodos del historial que cambian el elemento actual.

Como puedes ver en el código de la función manejadora de evento, el objeto evento nos ofrece una propiedad llamada state en la que encontramos el objeto enviado al estado de este elemento del historial. Basándonos en ese estado podríamos por ejemplo decidir qué vista o datos cargar en una aplicación web.

Código de ejemplo para el trabajo con el objeto history de Javascript

A continuación encuentras el código de una página web completa que hemos usado para explicar los distintos métodos y propiedades de history.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Objeto history</title>
</head>
<body>
  <h1>Trabajo con el objeto history del navegador</h1>

  <p>
    <button id="reemplazar">Reemplazar estado</button>
    <button id="push">Añadir estado</button>
    <button id="longitud">Longitud del historial</button>

  </p>
  <p>
    Después de cambiar la URL puedes navegar adelante o atrás.
  </p>
  <p>
    <button id="atras">Ir atrás</button>
    <button id="adelante">Ir adelante</button>
  </p>

  <script>
    
    document.getElementById('reemplazar').addEventListener('click', function() {
      history.replaceState({ productId: 2 }, "Producto interesante", "/producto/interesante");
    });

    document.getElementById('push').addEventListener('click', function () {
      history.pushState(null, 'Soy Hohoho', '/ho/ho/ho');
    });

    document.getElementById('longitud').addEventListener('click', function () {
      console.log(window.history.length);
    });

    document.getElementById('adelante').addEventListener('click', function () {
      window.history.forward();
    });

    document.getElementById('atras').addEventListener('click', function () {
      window.history.back();
    });

    // Definir un maneador del evento popstate, que ocurre cuando se realiza un cambio a través del historial
    window.addEventListener('popstate', function (event) {
      console.log('Ha cambiado el historial');
      if (event.state) {
        console.log('Hemos recibido algún estado:', event.state);
      }
    });
  </script>
</body>
</html>