HTMLのpushStateステートオブジェクトとは？意味と使い方を解説

pushStateのステートオブジェクトとは

history.pushState()は、HTML5 History APIに含まれるメソッドで、ページを再読み込みすることなくURLを変更し、新しい履歴エントリを作成できます。その第1引数として渡すのが「ステートオブジェクト（状態オブジェクト）」です。ここには、その履歴エントリに関連付けておきたい任意のデータを保存でき、ユーザーが「戻る」ボタンで履歴を遡った際に、保存したデータを取り出してページの表示状態を復元するために活用されます。

pushStateで履歴エントリを作成する例

以下の例では、ユーザーが選択した色をステートオブジェクトに格納し、それに対応する履歴エントリを作成しています。

function display(color) {
    var myState = { selectedColor: color },
        myTitle = "Page title",
        myPath = "/" + color;
    history.pushState(myState, myTitle, myPath);
}

このコードでは、selectedColorプロパティを持つオブジェクトを状態として渡すことで、URLを /色名 の形式で更新しながら履歴に記録しています。

popstateイベントで状態を復元する

ユーザーがブラウザの「戻る」や「進む」ボタンで履歴間を移動すると、popstateイベントが発生します。このイベントを受け取って、保存しておいたステートオブジェクトから選択された色を復元する例が以下です。

$(window).on('popstate', function(event) {
    var myState = event.originalEvent.state;
    if (myState) {
        selectColor(myState.selectedColor);
    }
});

event.originalEvent.stateから取得したステートオブジェクトが存在すれば、その中のselectedColorを使って画面の表示を元の状態へ戻せます。

利用時の注意点

• ステートオブジェクトには、シリアライズ可能なデータのみを指定できます。
• popstateイベントは、同一ドキュメント内での履歴移動時にのみ発生します。
• ページを直接再読み込みした場合、ステートオブジェクトは自動的には復元されません。必要に応じてURLから状態を復元する仕組みも併用すると安全です。