履歴APIにおけるhashchangeとpopstateの比較

hashchangeおよびpopstateイベントはいずれもブラウザ履歴APIであり、どちらもHTML 5のAPIであり、popstateはhashchangeよりも強力である.この2つの履歴管理は、ソースポリシーによって制限されていることに注意してください.ここでは、両者の違いと関連アプリケーションを明らかにします.
hashchange hashchangeイベントは、ブラウザURLにhashが変化した後にトリガーされるイベント(イベントトリガー後にブラウザ履歴にレコードが追加される)であり、URLにおける＃後の内容がhashであり、その変化によってトリガーされるhashchangeイベントがajaxと最もよく組み合わせられている.私の理解では、hashの変化はサーバに要求されないため、hashchangeイベントがなければ、ブラウザの前進と後退ボタンをクリックすると、サーバは反応できません(サーバは要求を受信できないため)、このイベントがあれば、jsを使用してajaxの新しい要求をトリガーしてサーバに応答させることができます.hashchangeイベント自体はhashの変化を監視するだけであり、ajaxと組み合わせて使用することでajaxの下で前進後退ボタンを履歴することが依然として有効であると考えられています.次の簡単なコードを使用して体験できます.

    Click me foo
        Click me bar

hashchangeのドキュメントmark?hashchange
popstate popstateイベントは一般的にpushState()とreplaceState()の2つの方法と組み合わせて使用され、ユーザーがブラウザの前進後退ボタンをクリックすると、このイベントをサポートするブラウザはpopStateイベントをトリガーし、その名の通り、このイベントがpopしたのはpushState()メソッドによって保存されたステータススタックであり、ここではpushState()メソッドの構文を簡単に置き換える.MDNドキュメントから参照します(titleの無視など、firefoxの方法の実装の違いが特に指摘されていることに注意してください).操作ブラウザの履歴:
pushState(object,title,url)

ステータスオブジェクト(state object)-pushState()メソッドで作成した新しい履歴エントリに関連付けられたJavaScriptオブジェクト.ユーザーが新しく作成したステータスにナビゲートするたびにpopstateイベントがトリガーされ、イベントオブジェクトのstateプロパティには履歴エントリのステータスオブジェクトのコピーが含まれます.シーケンス可能なオブジェクトは、ステータスオブジェクトとして使用できます.FireFoxブラウザはステータスオブジェクトをユーザーのハードディスクに保存するので、ユーザーがブラウザを再起動した後に復元することができ、ステータスオブジェクトのサイズを640 kに強制的に制限します.PushState()メソッドに限度額を超えるステータスオブジェクトを渡すと、メソッドは例外を放出します.大きなデータを格納する必要がある場合は、sessionStorageまたはlocalStorageを使用することをお勧めします.

タイトル-FireFoxブラウザでは、後で使用する可能性がありますが、このパラメータは無視されます.将来、このメソッドが変更される可能性があることを考慮すると、空の文字列を渡すのは安全です.または、入るステータスを示す短いタイトルを入力することもできます.

アドレス(URL):新しい履歴エントリのアドレス.ブラウザはpushState()メソッドを呼び出した後にアドレスをロードしませんが、その後、ユーザーがブラウザを再起動するなど、ロードしようとする可能性があります.新しいURLは必ずしも絶対パスではありません.相対パスの場合、現在のURLを基準にします.入力されたURLは現在のURLと同源であるべきで、そうでなければpushState()は異常を投げ出す.このパラメータはオプションです.指定しないとドキュメントの現在のURLになります.

popstateイベントがトリガーされるたびに、イベントオブジェクトのstateプロパティには、pushState()メソッドで押し込まれた状態オブジェクトが保存されます.「javascript権威ガイド」では例22-3が生き生きとこの使い方を示しています.ここではこの例をcodepenに置きます(リンクをクリックして開き、数字を推測するたびにブラウザの前進後退ボタンを使って状態回復を観察します)、いくつかの注釈を書き直しました.popstateベースのデジタルゲーム
ここでは、replaceState()について説明するが、この方法はpushState()と同様であるが、現在のステータスを最初のパラメータ(ステータスオブジェクト)でアクティブに置き換えるものであり、ブラウザ履歴に履歴を追加することはなく、window.location.replace(url)に類似している.
hashchangeとpopstateの違いのまとめ

hashchangeはhash値が変化するときにのみトリガーされ、popstateはそれをサポートするブラウザで「前進」「後退」ボタンを押すだけでWindowオブジェクト上で

をトリガーする.

popstateイベントは、任意の同源urlの下でトリガーすることができ、すなわちexample.com/page 1とexample.com/page 2ではトリガーできますが、hashchangeはexampleのみです.com/page 1#hashでのみ可能(この点は一応個人的に理解しており、実験はしていない)

イベントオブジェクトを使用すると、hashに

を追加することなく、データを抽象化できます.