replaceState()とpushState()


回答:


159

replaceState()ブラウザのURLを変更します(つまり、戻るボタンを押しても元に戻りません)

pushState() URLを変更し、古いURLをブラウザの履歴に保持します(つまり、戻るボタンを押すと元に戻ります)


57

あなたのリンクから

history.replaceState()は、replaceState()が新しい履歴エントリを作成する代わりに現在の履歴エントリを変更することを除いて、history.pushState()とまったく同じように動作します。

replaceState()は、ユーザーの操作に応じて現在の履歴エントリの状態オブジェクトまたはURLを更新する場合に特に便利です。

単に履歴エントリを更新したいreplaceState()場合はpushState()、それ以外の場合はを使用します。これにより、古いエントリが保持され、新しいエントリが作成されます。これらは似ていますが、どちらも効果が異なるため、新しい履歴エントリを置き換えるか作成するかによって異なります。

私がカードのデッキを他のカードの上に重ねて(表向きに)配っていると考えてください。あなたは一番上のカード(つまり、最後に配ったカード)しか取ることができません。ハートのジャックを山に置いたとしましょう。を使用する場合は次のカードのreplaceStateために、そのジャック・オブ・ハーツを外して次のカードを置きます。一番上のカードを交換したばかりなので、カードの数は同じです。pushState代わりに使用した場合は、次のカードをJack of Heartsの上に置きます(したがって、両方が山に存在し、山は1枚上になります)。

URLと同様にカードを交換すると、URL履歴が変更されます。


2
「history.replaceState()はhistory.pushState()とまったく同じように動作しますが、replaceState()が新しい履歴エントリを作成する代わりに現在の履歴エントリを変更する点が異なります。」この見積もりは、developer.mozilla.org / en-US / docs / Web / API / History_APIで見つけました。グローバルブラウザの履歴とは何か説明していただけますか。エントリはグローバルブラウザの履歴に作成されていると表示されます。
Raghu DV 2017

「グローバルブラウザ履歴」とはどういう意味ですか?@RaghuDV
stevemao

@keyboardP素晴らしい説明。どうもありがとう。
michael.zech 2018年
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.