69

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

4

3 に答える 3

112

この小さな例を見てください - fiddle を実行してください:

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

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 }, // <--- here
        title = "Page title",
        path  = "/" + color;
    
    history.pushState(state, title, path);
};
  1. 次に、選択した色をいつ更新する必要があるかを知るために、イベントをリッスンしpopstateます。これは次のとおりです。
window.addEventListener('popstate', function (event) {
    var state = event.state;
    
    if (state) {
        selectColor( state.selectedColor );
    }
});

更新された例を試してください: run fiddle : ユーザーが履歴をさかのぼると、それに応じてページが更新されます。

于 2013-12-12T13:16:42.807 に答える
1

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

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

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

その後、Web アプリはそのグリッドにユーザー固有の状態データを入力できます

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

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

いくつかのよく知られた並べ替え手法を使用して、ブラウザーの履歴と場所 (状態を含む) から全体の複雑なアプリを再構築できます。

かっこいいね

于 2016-09-14T06:12:44.000 に答える