現在のブラウザには非常に興味深い機能があり、閲覧中にページを更新せずにブラウザの URL を変更でき、ブラウザのボタンをクリックすると閲覧履歴を保存できます。閲覧履歴を参照してロールバック情報を取得できます。これは複雑ではないので、いくつかのコードを書いてみましょう。どのように機能するかを見てみましょう。
var stateObject = {}; var title = "Wow Title"; var newUrl = "/my/awesome/url"; history.pushState(stateObject,title,newUrl);
History object PushState() 上の例からわかるように、このメソッドには 3 つのパラメータがあります。最初のパラメータは Json オブジェクトで、現在の URL に関する履歴情報を保存します。2 番目のパラメータ title はドキュメントのタイトルを渡すのと同じで、3 番目のパラメータは新しい URL を渡すために使用されます。ブラウザのアドレス バーは変化しますが、現在のページは更新されません。
個々の URL に任意のデータを保存する例を見てみましょう。
for(i=0;i<5;i++){ var stateObject = {id: i}; var title = "Wow Title "+i; var newUrl = "/my/awesome/url/"+i; history.pushState(stateObject,title,newUrl); }
今すぐ実行し、ブラウザの戻るボタンをクリックして、URL がどのように変化するかを確認してください。 URL の変更ごとに、履歴状態「id」と対応する値が保存されます。しかし、歴史的状態を取り戻し、それに基づいて何かをするにはどうすればよいでしょうか?イベント リスナーを「popstate」に追加する必要があります。これは、履歴オブジェクトの状態が変化するたびにトリガーされます。
for(i=0;i<5;i++){ var stateObject = {id: i}; var title = "Wow Title "+i; var newUrl = "/my/awesome/url/"+i; history.pushState(stateObject,title,newUrl); alert(i); } window.addEventListener('popstate', function(event) { readState(event.state); }); function readState(data){ alert(data.id); }
これで、「戻る」ボタンをクリックするたびに「popstate」イベントが発生することがわかります。次に、イベント リスナーは、履歴状態オブジェクトが関連付けられている URL を取得し、「id」の値の入力を求めます。
とてもシンプルで楽しいですね。