recherche

Maison >interface Web >js tutoriel >L'API d'historique JavaScript

L'API d'historique JavaScript

Patricia Arquette
Patricia Arquetteoriginal
2024-12-25 18:06:13959parcourir

Introduction

L'API d'historique JavaScript fait partie de l'API Web qui nous permet d'interagir avec l'historique des sessions du navigateur. Il fournit des méthodes et des propriétés pour naviguer, manipuler et contrôler la pile d'historique, permettant aux développeurs de créer des expériences utilisateur plus dynamiques et interactives sans nécessiter de rechargements de pages complètes.

Principales fonctionnalités de l'API d'historique JavaScript

  1. history.back()
  2. history.forward()
  3. history.go(n)
  4. history.pushState()
  5. history.replaceState()

La méthode history.back()

Cette méthode déplace le navigateur vers la page précédente de l'historique de session, équivalent au bouton retour du navigateur. Cela ne fonctionnera que si une page précédente existe dans la pile d'historique du navigateur.

Exemple :

<!DOCTYPE html>
<html>
<body>

<h1>The Window History Object</h1>
<h2>The history.back() Method</h2>

<button onclick="history.back()">Go Back</button>

</body>
</html>

Sortie :

The JavaScript History API

Cliquer sur le bouton "Revenir en arrière" ramènera l'utilisateur à la page précédente si elle existe dans la pile d'historique.

La méthode history.forward()

Cette méthode déplace le navigateur vers la page suivante de l'historique de session, équivalent au bouton Suivant du navigateur. Cela ne fonctionnera que si une page suivante existe dans la pile d'historique du navigateur.

Exemple :

<!DOCTYPE html>
<html>
<body>

<h1>The Window History Object</h1>
<h2>The history.forward Method</h2>

<button onclick="history.forward()">Go Forward</button>

</body>
</html>

Sortie :

The JavaScript History API

Cliquer sur le bouton "Aller de l'avant" amènera l'utilisateur à la page suivante si elle existe dans la pile d'historique.

La méthode history.go()

Cette méthode est utilisée pour naviguer vers un point spécifique de la pile du navigateur. Il faut un argument 'n', qui spécifie le numéro de la page vers laquelle nous voulons naviguer dans la pile d'historique.

L'argument 'n' peut accepter les valeurs suivantes :

  • Positive 'n' fait avancer l'utilisateur dans la pile.
  • Négatif 'n' fait reculer l'utilisateur dans la pile.
  • Si 'n' a la valeur 0, il recharge la page en cours.

La méthode history.pushState()

Cette méthode est utilisée pour ajouter une nouvelle entrée dans la pile d'historique de la session en cours c'est-à-dire la collection de toutes les pages visitées dans l'onglet actuel du navigateur.

Exemple :
Nous allons créer un élément bouton et lui attribuer un gestionnaire de clic. À l’intérieur du gestionnaire, nous appelons la méthode pushState(). Ceci ajoute une nouvelle entrée avec une URL différente de celle de la page actuelle.

// HTML ->
<button>Call pushState()</button>

// JavaScript ->
var button = document.querySelector('button');
button.onClick = function() {
    history.pushState(null, ' ', 'some-page');
}

Sortie :

The JavaScript History API

Actuellement, l'URL est - https://www.codeguage.com/courses/js/examples/pushstate

Lorsque vous cliquerez sur le bouton, l'URL deviendra - https://www.codeguage.com/courses/js/examples/some-page

The JavaScript History API

Cela confirme qu'une nouvelle entrée a été ajoutée à l'historique de la session en cours, et en modifiant l'URL dans la barre d'adresse du navigateur. Vous pouvez également voir que la flèche de retour du navigateur est également active désormais dans le coin supérieur gauche, en cliquant sur celle-ci vous ramènera à -
https://www.codeguage.com/courses/js/examples/pushstate

Une chose extrêmement importante à savoir est que pushState() modifie l'URL sans jamais vérifier si elle existe réellement ou non. En effet, le but de pushState() n'est pas de charger une page Web, mais plutôt de simplement ajouter une nouvelle entrée à l'historique.

La méthode history.replaceState()

Cette méthode remplace l'entrée actuelle dans la pile d'historique de la session en cours par une nouvelle entrée.

Exemple :
Comme auparavant, nous avons un bouton avec un gestionnaire de clics défini. Mais cette fois, à l'intérieur du gestionnaire, nous appelons replaceState() pour remplacer l'entrée actuelle de l'historique par une nouvelle.

<!DOCTYPE html>
<html>
<body>

<h1>The Window History Object</h1>
<h2>The history.back() Method</h2>

<button onclick="history.back()">Go Back</button>

</body>
</html>

Sortie :

The JavaScript History API

L'URL actuelle est -
https://www.codeguage.com/courses/js/examples/replacestate

Lorsque vous cliquez sur le bouton, l'URL devient -
https://www.codeguage.com/courses/js/examples/some-page

The JavaScript History API

L'URL du navigateur a été remplacée et vous pouvez remarquer que la flèche arrière dans le coin supérieur gauche n'est PAS active, confirmant qu'une nouvelle entrée a N'A PAS été ajouté à la pile d'historique, nous venons de remplacer l'entrée actuelle par une nouvelle.

Et c'est tout ! Vous avez découvert avec succès l'API JavaScript History et comment utiliser et intégrer ses différents utilitaires dans vos applications.

Connectez-vous avec moi sur LinkedIn :- Linkedin

Consultez mon GitHub pour des projets incroyables :- Github

Voir mon portfolio personnel : - Le portfolio d'Aryan

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

JavaScript if for Session Collection JS number this history github https
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Maîtriser la composition des fonctions en JavaScript : un guide pour combiner des fonctions pour un meilleur codeArticle suivant：Maîtriser la composition des fonctions en JavaScript : un guide pour combiner des fonctions pour un meilleur code

Articles Liés

Voir plus