H5のpushStateとreplaceStateの使い方

H5のpushStateとreplaceStateは、Historyオブジェクトの2つのメソッドであり、ブラウザの履歴を変更するために使用されます。

pushStateメソッドは、新しい履歴を追加し、ページをリロードしないためのものです。state、title、urlの3つのパラメータを受け入れます。

1. state：新しい履歴状態を表すJavaScriptオブジェクト。このオブジェクトには任意のデータが含まれており、ページの状態情報を保存するために使用されます。
2. 現在、ほとんどのブラウザはこのパラメータを無視しています。
3. 新しい履歴のURLは、相対URLまたは絶対URLのどちらでも構いません。

日本語で要求書を送ってくれませんか？

history.pushState({page: 1}, "Page 1", "/page1");

このコードは、新しい履歴を追加し、URLは/page1、状態オブジェクトは{page:1}になります。

replaceStateメソッドは、現在の履歴を置き換え、ページをリフレッシュしません。state、title、urlの3つの引数を受け取り、pushStateメソッドと同じ引数を持っていますが、replaceStateは現在の履歴を置き換えますが、新しいものを追加しません。

history.replaceState({page: 2}, "Page 2", "/page2");

上記のコードは現在の履歴を置き換え、URLは/page2、状態オブジェクトは{page: 2}となります。

pushStateとreplaceStateメソッドを使用することで、ページ遷移やページの状態管理をリフレッシュなしで実現することができます。popstateイベントを使用して、履歴の変更を監視し、状態オブジェクトに基づいて適切な操作を行うことができます。