ヒストリに新しい状態オブジェクトを追加または追加する方法

Question

dataを現在のページ状態に保存する次のコードがあります。

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

今、別の値であるscrollTopも保存します。そして、私は

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

を行う場合は上記のコードは、新しいものと履歴状態を置き換えますとmyDataが消えてしまいます。

私の覚えている状態にはmyDataがありますが、とにかく私はscrollTopを追加できますか？または私はちょうどそれを設定する必要があり、最初はwindow.history.state.addObjectか何かのような機能があります場合、私は思っています、

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

が好きです。

Answer 1

デフォルトでは、history.state.addObject機能はありません。 history.stateには、プッシュしたオブジェクト（ほかには何もありません）が含まれています。

addObjectメソッドを持つものをプッシュすることはできますが、それは良い考えのようには見えません。 変更を新しい状態として履歴にプッシュする場合は、いつでも明示的に状態をプッシュする必要があります。そして、新しい状態をプッシュするとき、同じ状態オブジェクトを使用してそれを変更した場合に起こる先のものを変更することを避けたいとします（the standard、history.stateが実際の状態データの複製であるとしても） 。 代わりに新しいオブジェクトを作成する必要があります（以前の状態のクローンである可能性があります）。

これはどのように行うことができます。 Object.assignとして

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

歴史には、現在の状態が存在しない場合でも、それは動作します（つまりwindow.history.stateがあるundefinedは）undefined引数を無視します。

また、それを自動化し、この機能を使用することができます。

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

それはまさに、それはまた、新しい状態で以前の状態のプロパティをコピーすることを除いてpushState（同じ引数）のように動作します。 だから代わりにあなたが行うことができ、以前のコード：あなたのURLパラメータは、両方のpushState法との間で同じであるので

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

Answer 2

、あなたが実際にそれを置き換える代わりの歴史に新しい状態を追加しています。状態データを別々に保つために別のURLを指定するか、オブジェクトを結合して状態に戻し直す必要があります