JavaScript-Implementierung der URL-Speicherung im Browser_Grundkenntnisse

In aktuellen Browsern gibt es eine sehr interessante Funktion. Sie können die Browser-URL ändern, ohne die Seite während des Browservorgangs zu aktualisieren. Wenn Sie auf die Schaltfläche klicken, können Sie den Browserverlauf speichern. Sie können den Browserverlauf durchsuchen, um die Rollback-Informationen zu erhalten. Das klingt nicht kompliziert und kann implementiert werden. Mal sehen, wie es funktioniert.

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

Verlaufsobjekt pushState() Diese Methode hat 3 Parameter, wie Sie im obigen Beispiel sehen können. Der erste Parameter ist ein Json-Objekt, das alle historischen Informationen über die aktuelle URL speichert. Der zweite Parameter, title, entspricht der Übergabe des Titels eines Dokuments, und der dritte Parameter wird zur Übergabe der neuen URL verwendet dass sich die Adressleiste des Browsers ändert, die aktuelle Seite jedoch nicht aktualisiert wird.

Sehen wir uns ein Beispiel an, in dem wir in jeder einzelnen URL einige beliebige Daten speichern.

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);
}

Führen Sie es jetzt aus und klicken Sie auf die Zurück-Schaltfläche Ihres Browsers, um zu sehen, wie sich die URL ändert. Für jede URL-Änderung werden der historische Status „id“ und der entsprechende Wert gespeichert. Aber wie können wir den historischen Zustand wiedererlangen und darauf aufbauend etwas unternehmen? Wir müssen „popstate“ einen Ereignis-Listener hinzufügen, der jedes Mal ausgelöst wird, wenn sich der Status des Verlaufsobjekts ändert.

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);
}

Jetzt sehen Sie, dass jedes Mal, wenn Sie auf die Schaltfläche „Zurück“ klicken, ein „popstate“-Ereignis ausgelöst wird. Unser Ereignis-Listener ruft dann die URL ab, mit der das Verlaufsstatusobjekt verknüpft ist, und fordert zur Eingabe des Werts von „id“ auf.

Es ist sehr einfach und macht Spaß, nicht wahr?