Implémentation JavaScript du stockage d'URL dans le navigateur_Connaissances de base

Il existe une fonctionnalité très intéressante dans les navigateurs actuels. Vous pouvez modifier l'URL du navigateur sans actualiser la page pendant le processus de navigation, vous pouvez stocker l'historique de navigation et cliquer sur Retour lorsque vous cliquez sur le bouton, vous pouvez parcourir l'historique de navigation pour obtenir les informations de restauration. Cela ne semble pas compliqué et peut être implémenté. Écrivons du code. Voyons comment cela fonctionne.

var stateObject = {};
var title = "Wow Title";
var newUrl = "/my/awesome/url";
history.pushState(stateObject,title,newUrl);

Objet historique pushState() Cette méthode a 3 paramètres, comme vous pouvez le voir dans l'exemple ci-dessus. Le premier paramètre est un objet Json, qui stocke toutes les informations historiques sur l'URL actuelle. Le deuxième paramètre, le titre, équivaut à transmettre le titre d'un document, et le troisième paramètre est utilisé pour transmettre la nouvelle URL. que la barre d'adresse du navigateur change mais que la page actuelle ne s'actualise pas.

Regardons un exemple dans lequel nous stockerons des données arbitraires dans chaque URL individuelle.

for(i=0;i<5;i++){
 var stateObject = {id: i};
 var title = "Wow Title "+i;
 var newUrl = "/my/awesome/url/"+i;
 history.pushState(stateObject,title,newUrl);
}

Exécutez-le maintenant et cliquez sur le bouton Précédent de votre navigateur pour voir comment l'URL change. Pour chaque changement d'URL, il stocke l'état historique "id" et la valeur correspondante. Mais comment pouvons-nous retrouver l’état historique et faire quelque chose sur cette base ? Nous devons ajouter un écouteur d'événement à "popstate", qui sera déclenché à chaque fois que l'état de l'objet historique change.

for(i=0;i<5;i++){
 var stateObject = {id: i};
 var title = "Wow Title "+i;
 var newUrl = "/my/awesome/url/"+i;
 history.pushState(stateObject,title,newUrl);
 alert(i);
}
 
window.addEventListener('popstate', function(event) {
 readState(event.state);
});
 
function readState(data){
 alert(data.id);
}

Vous verrez maintenant que chaque fois que vous cliquez sur le bouton Précédent, un événement "popstate" sera déclenché. Notre écouteur d'événements récupère ensuite l'URL à laquelle l'objet d'état d'historique est associé et demande la valeur "id".

C'est très simple et amusant, n'est-ce pas ?