web-dev-qa-db-ja.com

pushState：状態オブジェクトは正確に何のためですか？

状態オブジェクトが複数のキーと値のペアで存在し、新しい履歴エントリに関連付けられていることを何度も読みました。しかし、誰かが状態オブジェクトの利点の例を教えてもらえますか？それの実際の使用は何ですか？なぜ{}を入力しないのか想像できない

html5objecthistorystatepushstate
52
campari

この小さな例を見てください： run fiddle （ editor view ）：

ユーザーが色を選択できるページがあります。実行するたびに、新しい履歴エントリが生成されます。

function doPushState(color) {
    var state = {},
        title = "Page title",
        path  = "/" + color;

    history.pushState(state, title, path);
};

ここでは、状態オブジェクトを空白のままにして、URLを色名に設定します（ページをリロードしないでください-そのURLは存在しないため、404が返されます）。

次に、赤、緑、青をそれぞれ1回クリックします。 URLが変更されることに注意してください。戻るボタンをクリックするとどうなりますか？

ブラウザーは実際に履歴に戻りますが、ページはそれを認識しません。URLは「/ blue」から「/ green」に戻りますが、ページは「You have selected blue」のままです。このページはURLと同期していません。

これはwindow.onpopstateイベントと状態オブジェクトは以下のためのものです。

  1. 選択した色を状態オブジェクトに含めます

    function doPushState(color) {
    var state = { selectedColor: color },
        title = "Page title",
        path  = "/" + color;

    history.pushState(state, title, path);
};

  2. 次に、popstateイベントをリッスンします。これにより、選択した色（jQueryの場合）を更新する必要があるタイミングがわかります。

    $(window).on('popstate', function(event) {
    var state = event.originalEvent.state;

    if (state) {
        selectColor( state.selectedColor );
    }
});

更新された例を試してください： run fiddle （ editor view ）：ユーザーが履歴をたどって戻ると、それに応じてページが更新されます。

90
janfoeh

特定の将来を見据えたユースケースは、ビューで地域的に分割されたカスタム要素とテンプレートを使用したプログレッシブアプリでのユーザービューとデータ状態の維持です。

ビューとして64ボックスグリッドを想像してください。大きな画面では、ボックスは147 ^ 2です

URLは、64 /ユーザーIDのabs関連ユーザーデータを表します

その後、Webアプリはユーザー固有の状態データでグリッドを埋めることができます

このユースケースでは、私が完全に信じているのは未来であり、ユーザーは自分の個人的な状態とデータが満たされたビュー部分を共有したくないでしょう

以前の履歴状態と関連する650kのデータを使用する

いくつかのよく知られたソート方法を使用して、ブラウザの履歴と状態（状態を含む）から複雑なアプリ全体を再構築できます。

かっこいいね

1
Jason Frazzano