Historial
Esta "api" se basa en la utilización del objeto "history", el cual permite interactuar con los datos almacenados en este, para lo cual cuenta con múltiples métodos, los cuales son:
-
length: Esta propiedad retorna el tamaño del historial; en otras palabras, retorna el número de registros que han sido almacenados en este. Por ende, esta propiedad revela el número de páginas almacenadas recientemente a las que se puede acceder.
Ejemplo
Nota: El valor de esta propiedad se puede apreciar imprimiendo el objeto desde consola, no es necesario aplicarlo como función para esto.
-
back(): Este método retorna al usuario a la URL anterior; en otras palabras, su efecto es el mismo al de la flecha de "Regresar" del navegador.
Ejemplo
-
forward(): Este método envía al usuario a la siguiente dirección URL del historial, esto a menos que este se encuentre en la última dirección registrada; en otras palabras, su efecto es el mismo que el de la flecha de "Adelante" del navegador.
Ejemplo
-
go(): Este método permite definir algún registro del historial hacia el cual se desplazará al usuario. En función de cuál sea el registro al que se desee redirigir al usuario, este método puede recibir varios valores:
-
1: Este valor redirecciona al usuario hasta la dirección más reciente del historial; en el caso de que esta retorne un valor "undefined", se debe a que la dirección actual ya es la más reciente.
Ejemplo
-
-1: Este valor redirige al usuario una URL hacia atrás en el historial; en otras palabras, este valor hace la misma función que el método "back()".
Ejemplo
-
0: Este valor, al igual que dejar los paréntesis vacíos, realiza el efecto de recargar la página actual.
Ejemplo
-
pushState(): Este método permite modificar la URL de la página actual.
-
Data: Se trata de los datos a enviar; estos pueden ser cualquier cosa en sí, incluyendo un objeto o simplemente un nombre.
-
Título: Se trata del nombre de la pestaña de la nueva dirección. Por lo general no funciona, a su vez tampoco es un dato que se use frecuentemente, pero lo más recomendable es ingresar el valor como vacío ("").
-
URL: Se trata del tercer y último dato, en el cual se añade la nueva dirección con la característica de que el primer símbolo de esta siempre debe ser un signo de interrogación (?).
Ejemplo
Resultado
Este método, al modificar la URL, lo que hace realmente es añadir los cambios como una nueva entrada en el historial; por lo tanto, es posible usar los métodos "go()", "forward()" y "back()" para redirigirlo a este o desde este.
-
state: Esta propiedad permite obtener los datos enviados a través de la URL con el método "pushState()".
Ejemplo
-
Evento popstate: Se trata de un evento especial que se dispara en el momento en el que el navegador detecta un cambio en el historial activo (como pulsar el botón atrás). Para esto se utiliza un escuchador de eventos vinculado por defecto al objeto "window", permitiéndole acceder a los datos de la URL:
Ejemplo
Resultado
-
replaceState(): Se trata de un método muy similar a "pushState()", tanto que incluso recibe los mismos parámetros, con la diferencia de que este método no genera una nueva entrada en el historial al modificar la URL de la página; a su vez, los datos enviados por este método tampoco serán detectados por la propiedad "state". De ese modo se podría decir que este método realiza el mismo efecto que "pushState()" pero sin dejar rastros.