Pop den letzten Zustand aus der Geschichte

Question

Ist es möglich, den HTML-Code des letzten Zustand zu bekommen, um Geschichte Stapel geschoben, so etwas wie dieses:

history.pushState(null, null, {html: $('body').html()}); 

Ändern der Fensterposition:

window.location = url; 

Jetzt ab der neue Standort:

window.addEventListener('popstate', function(event) { 
    // back to the last state - event.state.html 
} 
history.back() // That what's firing the popstate event? 

Answer 1

Ich suchte nach der Anforderung, um die HTML des letzten Staates in die Geschichte geschoben zu bekommen, aber hat keine befriedigenden Antworten bekommen. Aber ich habe eine Idee für dich, warum versuchst du nicht, das HTML des Staates zu speichern, bevor du es in die Geschichte schiebst? Dies ist durchaus möglich, wenn clientseitige (Cookies) oder serverseitige (Session-) Variablen verwendet werden, die auch dann abgerufen werden können, wenn die Dinge in den Verlauf zurückgeschoben wurden.

Answer 2

Die pushstate Methode nimmt das state Objekt als erstes Argument, in dem Sie in null vorbei sind:

Beispiel pushstate() Methode

var stateObj = {foo "bar"} ;

history.pushState (stateObj, "Seite 2", "bar.html");

Für Ihr Beispiel:

//object goes in first argument 
history.pushState({ html: $('body').html() }, "Title of Page", "Url to update address bar"); 

//On PopState, you have access to event.state 
window.addEventListener('popstate', function(event) { 
    var priorStateObj = event.state; 
    console.log(priorStateObj.html); 
} 

Was mich betrifft, ist, dass Sie scheinen dann möglicherweise zu wollen document.write(), die auf der HTML-Seite zurück? Wenn ja, würde ich versuchen, dies zu vermeiden, wie in diesem SO-Thread erläutert: Why is document.write considered a "bad practice"?

Soweit das gesamte HTML des Körpers speichern, das ist schwierig. In Firefox zum Beispiel gibt es ein Limit von 640 Kilobit. Wenn Ihr HTML-Code möglicherweise diesen Wert überschreiten könnte (wahrscheinlich), sollten Sie nur Informationen speichern, mit denen Sie das wiederherstellen können, was Sie benötigen. Versuchen Sie, eine Object mit nur den Informationen zu speichern, die Sie benötigen, um die Seite mit JavaScript/jQuery/etc zu füllen.

Das Zustandsobjekt kann alles sein, was serialisiert werden kann. Da Firefox Statusobjekte auf der Festplatte des Benutzers speichert, so dass sie nach dem Neustart des Browsers wiederhergestellt werden können, erzwingen wir eine Größenbeschränkung von 640k Zeichen in der serialisierten Darstellung eines Statusobjekts. Wenn Sie ein Statusobjekt übergeben, dessen serialisierte Repräsentation größer als ist, an pushState(), löst die Methode eine Ausnahme aus. Wenn Sie mehr Speicherplatz benötigen, sollten Sie sessionStorage und/oder localStorage verwenden.

Viel mehr gute Infos hier:

https://developer.mozilla.org/en-US/docs/Web/API/History_API