Novedades ES6

Propiedad history del objeto window en JavaScript

El objeto history colabora directamente con el objeto window: El objeto history almacena todas las páginas que visitamos. Luego, con una serie de funciones, podemos extraer de la memoria de la computadora las páginas ya visitadas, sin tener que pedirlas nuevamente al servidor.

La propiedad de solo lectura Window.history regresa una referencia al objeto History, quien provee una interfaz para manipular el historial de sesión del navegador (páginas visitadas en el tab o marco de la pagina actual cargada).

Por razones de seguridad el objeto History no permite que el código sin privilegio acceda a las URLs de otras páginas en el historial de la sesión, pero permite navegar por el historial de la sesión.

El objeto history almacena todas las páginas que visitamos. Luego, con una serie de funciones, podemos extraer de la memoria de la computadora las páginas ya visitadas, sin tener que pedirlas nuevamente al servidor.

Cuenta con las siguientes funciones:

  • window.history.back(); //Retrocede a la página anterior
  • window.history.forward(); //Avanza a la página siguiente almacenada en la cache de la máquina.
  • window.history.go(); //Avanza o retrocede en la lista de páginas visitadas.

Llamar a la función back, tiene el mismo comportamiento que presionar el botón "Atrás" del navegador.

El siguiente ejemplo nos permite cargar una segunda página y luego retroceder a la primera página sin tener que solicitarla nuevamente al servidor:

<!DOCTYPE html>
<html>
<head>
<title>Ejemplo de JavaScript</title>
<meta charset="UTF-8">
</head>
<body>

<script>
function avanzar()
{
window.history.go(1);
}
</script>

</head>
<body>
<a href="eje38_2.html">Ir a la página 2</a>
<br>
<br>
<a href="javascript:avanzar()">Extraer del cache la segunda página</a>
</body>
</html>

En esta primera página, la primera vez, debemos cargar la segunda página seleccionando el hipervínculo pagina2.

La segunda página:

<!DOCTYPE html> <html>
<head>
<title>Ejemplo de JavaScript</title> <meta charset="UTF-8">
</head>
<body>

<script>
function retornar()
{
window.history.go(-1);
}
</script>

<a href="javascript:retornar()">Retornar</a>
</body>
</html>


En la segunda página, mediante el método go y pasándole un valor negativo, retrocedemos a la primera página sin tener la necesidad de recargarla.

Podemos mejorar el ejemplo accediendo al atributo length (almacena la cantidad de páginas de la lista) del objeto history:

if (window.history.length>0) {
window.history.go(1);
}
else
{
alert('no hay otra página en la cache hacia adelante');
}