Hinzufügen oder Hinzufügen neuer stateObject zum Verlauf

Question

Ich habe den folgenden Code, um meine data im aktuellen Seitenzustand zu speichern.

window.history.pushState({myData: data}, "RandomTitle", '#'); 

Aber jetzt möchte ich auch einen anderen Wert speichern, die scrollTop ist. Und wenn ich

window.history.pushState({scrollTop: scrollTop}, "RandomTitle", '#'); 

Der obige Code wird die Geschichte Zustand mit dem neuen ersetzen und myData verschwunden sein.

Die Frage, gibt es trotzdem kann ich scrollTop hinzufügen, während es myData in meinem historischen Zustand gibt? Oder ich muss es nur anfänglich wie,

window.history.pushState({myData: data, scrollTop: 0}, "RandomTitle", '#'); 
// To change the scrollTop in history state 
window.history.state.scrollTop = $(window).scrollTop(); 

Ich denke, wenn es eine Funktion wie window.history.state.addObject oder so etwas.

Answer 1

Standardmäßig gibt es keine history.state.addObject Funktion. history.state enthält das Objekt, das Sie (und nichts anderes) gedrückt haben.

Sie können etwas drücken, das eine addObject Methode hat, aber es sieht nicht wie eine gute Idee aus. Wenn Sie möchten, dass die Änderung in der Historie als neuer Status angezeigt wird, müssen Sie den Status jedes Mal explizit pushen. Und wenn Sie einen neuen Zustand pushen, wollen Sie vermeiden, den vorherigen zu mutieren, was passieren wird, wenn Sie dasselbe Zustandsobjekt verwenden und es modifizieren (auch wenn es nach the standard, history.state eigentlich ein Klon der tatsächlichen Zustandsdaten sein soll) . Sie sollten stattdessen ein neues Objekt erstellen (es kann ein Klon des vorherigen Zustands sein).

Hier ist, wie Sie es tun können.

window.history.pushState(
    Object.assign({}, window.history.state, {scrollTop: scrollTop}), 
    "RandomTitle", '#' 
); 

Es wird sogar funktionieren, wenn es keine aktuellen Stand in der Geschichte ist (das heißt window.history.state ist undefined) als Object.assign ignoriert undefined Argumente.

Sie können diese Funktion verwenden, die es automatisiert:

function extendHistoryState(){ 
    arguments[0] = Object.assign({}, window.history.state, arguments[0]); 
    window.history.pushState.apply(window.history, arguments); 
} 

Es funktioniert genau wie pushState (gleiche Argumente), außer, dass es auch die Eigenschaften des vorherigen Zustandes im Neuzustand kopieren. Also statt des vorherigen Code können Sie tun:

extendHistoryState({scrollTop: scrollTop}, "RandomTitle", '#'); 

Answer 2

Da Ihr URL-Parameter die gleiche zwischen den beiden Methoden ist pushstate, Sie ersetzen es tatsächlich statt einen neuen Staat auf die Geschichte angehängt wird. Sie müssen entweder eine andere URL angeben, um die Statusdaten getrennt zu halten, oder die Objekte kombinieren und erneut dem Status zuweisen.