ブラウザでの URL 保存の JavaScript 実装_基礎知識

現在のブラウザには非常に興味深い機能があり、閲覧中にページを更新せずにブラウザの 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」の値の入力を求めます。

とてもシンプルで楽しいですね。