En este artículo, aprenderemos cómo acceder al historial en JavaScript. Usaremos el objeto Historial para acceder a la pila de historial en JavaScript. Cada navegador web almacenará los datos sobre qué sitios web o páginas web se abrieron durante la sesión en una pila de historial. Para acceder a esta pila de historial, necesitamos usar el objeto Historial en JavaScript.
Objeto de historial: el objeto de historial contiene el historial del navegador. Las URL de las páginas visitadas por el usuario se almacenan como una pila en el objeto de historial. Existen múltiples métodos para administrar/acceder al objeto de historial.
Métodos del objeto Historia:
1. El método forward(): este método se usa para cargar la siguiente URL en la lista del historial. Esto tiene la misma funcionalidad que el siguiente botón en el navegador. No hay parámetros y no devolverá nada.
Sintaxis:
history.forward()
2. El método back(): este método se utiliza para cargar la URL anterior en la lista del historial. Esto tiene la misma funcionalidad que el botón Atrás en el navegador. No hay parámetros y no devolverá nada.
Sintaxis:
history.back()
3. El método go(): este método se utiliza para cargar una URL de la lista del historial.
Sintaxis:
history.go(integer)
Parámetros: este método tiene un solo parámetro que especifica la URL del historial. Puede tener los siguientes valores:
| Valor | Uso |
| -1 | Carga la página anterior desde la pila de historial. |
| 0 | Recarga la página. |
| 1 | Carga la página siguiente desde la pila de historial |
Ejemplo 1: usar adelante() y atrás()
geekshtml.html
<!DOCTYPE html>
<html>
<head>
<style>
a,
input {
margin: 10px;
}
</style>
</head>
<body>
<h1>This is page 1</h1>
<a href="/geekshtml2.html">Go to page 2</a> <br>
back button : <input type="button"
value="Back" onclick="previousPage()"> <br>
forward button : <input type="button"
value="Forward" onclick="NextPage()"> <br>
<script>
function NextPage() {
window.history.forward()
}
function previousPage() {
window.history.back();
}
</script>
</body>
</html>
geekshtml2.html
<!DOCTYPE html>
<html>
<head>
<style>
a,
input {
margin: 10px;
}
</style>
</head>
<body>
<h1>This is page 2</h1>
back button : <input type="button"
value="Back" onclick="previousPage()"> <br>
forward button : <input type="button"
value="Forward" onclick="NextPage()"> <br>
<script>
function NextPage() {
window.history.forward()
}
function previousPage() {
window.history.back();
}
</script>
</body>
</html>
Producción:
Ejemplo 2: Uso de los métodos go(), forward() y back().
geekshtml.html
<!DOCTYPE html>
<html>
<head>
<style>
a,
input {
margin: 10px;
}
</style>
</head>
<body>
<h1>This is page 1</h1>
<a href="/geekshtml2.html">Go to page 2</a> <br>
back button : <input type="button"
value="Back" onclick="previousPage()"> <br>
forward button : <input type="button"
value="Forward" onclick="NextPage()"> <br>
Go button : <input type="button"
value="go" onclick="go()"> <br>
<script>
function NextPage() {
window.history.forward()
}
function previousPage() {
window.history.back();
}
function go() {
window.history.go(0);
}
</script>
</body>
</html>
geekshtml2.html
<!DOCTYPE html>
<html>
<head>
<style>
a,
input {
margin: 10px;
}
</style>
</head>
<body>
<h1>This is page 2</h1>
back button : <input type="button"
value="Back" onclick="previousPage()"> <br>
forward button : <input type="button"
value="Forward" onclick="NextPage()"> <br>
Go button : <input type="button"
value="go" onclick="go()"> <br>
<script>
function NextPage() {
window.history.forward()
}
function previousPage() {
window.history.back();
}
function go() {
window.history.go(0);
}
</script>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por pulamolusaimohan y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA