Come aggiungere o aggiungere nuovo statoObject alla cronologia

Question

Ho il seguente codice per salvare il mio data nello stato corrente della pagina.

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

Ma ora, voglio anche salvare un altro valore che è scrollTop. E se lo faccio

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

Il codice sopra sostituirà lo stato storia con la nuova e myData sarà andato.

La domanda, Esiste comunque la possibilità di aggiungere scrollTop mentre c'è lo stato della cronologia myData? O mi resta che impostare inizialmente come,

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

sto pensando se c'è una funzione come window.history.state.addObject o qualcosa del genere.

Answer 1

Per impostazione predefinita, non esiste la funzione history.state.addObject. history.state contiene l'oggetto che hai premuto (e nient'altro).

È possibile inviare qualcosa che ha un metodo addObject, ma non sembra una buona idea. Se si desidera che la modifica venga inserita nella cronologia come un nuovo stato, è necessario premere ogni volta in modo esplicito lo stato. E quando si preme un nuovo stato, si vuole evitare di mutare il precedente, che avverrà se si utilizza lo stesso oggetto di stato e lo si modifica (anche se in base allo the standard, si suppone che siaun clone dei dati dello stato effettivo) . Dovresti invece creare un nuovo oggetto (potrebbe essere un clone dello stato precedente).

Ecco come si può fare.

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

E funziona anche se non c'è stato attuale nella storia (cioè window.history.state è undefined) come Object.assign ignora undefined argomenti.

È inoltre possibile utilizzare questa funzione che consente di automatizzare esso:

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

Funziona esattamente come pushState (stessi argomenti) tranne che sarà anche copiare le proprietà dello stato precedente nel nuovo stato. Così, invece di codice precedente si può fare:

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

Answer 2

Dal momento che il parametro URL è lo stesso tra i due metodi pushState, si sta effettivamente sostituendo esso invece di aggiungere un nuovo stato alla storia. Dovrai specificare un URL diverso per mantenere separati i dati di stato, o combinare gli oggetti e riassegnarli allo stato