JavaScript HTML5 スクリプト プログラミング -- 「履歴状態管理」で注意すべき重要なポイント_html/css_WEB-ITnose

履歴状態の管理は、現代の Web アプリケーション開発における難しい点です。最新の Web アプリケーションでは、ユーザーの各操作が必ずしも新しいページを開くとは限らないため、「戻る」ボタンと「進む」ボタンの機能が失われ、ユーザーが異なる状態を切り替えることが困難になります。

この問題を解決するには、

• hashchange イベント (第 13 章で説明) を使用することをお勧めします。 HTML5 は、

• 履歴オブジェクトを更新することで履歴状態を管理するのに便利です。

hashchange イベントを通じて、URL のパラメータがいつ変更されたか、つまり、いつ反応すべきかを知ることができます。状態管理 API を使用すると、新しいページを読み込まずにブラウザの URL を変更できます。これを行うには、

• history.pushState() メソッドを使用する必要があります。このメソッドは、状態オブジェクト、新しい状態のタイトル、およびオプションの相対 URL の 3 つのパラメーターを受け取ることができます。

例:

history.pushState({name:"Nicholas"}, "Nicholas' page", "nicholas.html");

• PushState() メソッドの実行後、新しい状態情報が履歴状態スタックに追加され、ブラウザのアドレス バーも新しい相対 URL になります。

• Popstate イベントがトリガーされます。 Popstate イベントのイベント オブジェクトには

• state 属性があり、最初に最初のパラメーターとして PushState() に渡された state オブジェクトが含まれます。

EventUtil.addHandler(window, "popstate", function(event){    var state = event.state;    if (state){   //第一个页面加载时state为空        processState(state);    }});

• replaceState() を呼び出すことができます。渡されるパラメータは、pushState() の最初の 2 つのパラメータと同じです。このメソッドを呼び出しても、履歴状態スタックに新しい状態は作成されず、現在の状態が上書きされるだけです。

history.replaceState({name:"Greg"}, "Greg's page");