JavaScript Historyオブジェクト

1.概要
window.history属性はヒットマンオブジェクトを指し、現在のウィンドウの閲覧履歴を表します.Historyオブジェクトは現在のウィンドウでアクセスしたすべてのページのURLを保存します.セキュリティ上の理由で、ブラウザではシナリオの読み込みは許可されていませんが、アドレス間のナビゲーションは許可されています.

//         
history.back()
//    
history.go(-1)

ブラウザツールバーの「前進」と「後退」ボタンは、Historyオブジェクトを操作します.
2.属性
Historyオブジェクトは主に二つの属性があります.History.length:現在のウィンドウにアクセスしたURL数(現在のページを含む)History.state:Historyスタックの一番上の状態値(詳細は以下参照)

//             
window.history.length // 1
// History        
//     undefined，    
window.history.state // undefined

3.方法
3.1 History.back()、History.forward()、History.go()
History.back():前のURLに移動すると、ブラウザの後退ボタンをクリックするのと同じです.最初に訪問したウェブサイトには効果がありません.History.forward():次のURLに移動すると、ブラウザの前進ボタンをクリックするのと同じです.最後に訪問したウェブサイトには効果がありません.History.go():一つの整数をパラメータとして受け入れ、現在のアドレスを基準に、go(1)はforward()に相当し、go(-1)はback()に相当します.パラメータが実際に存在するURL範囲を超えている場合、この方法は効果がありません.パラメータが指定されていない場合、デフォルトのパラメータは0で、現在のページを更新するのに相当します.

history.back();
history.forward();
history.go(-2);
history.go(0); //       

なお、以前に訪問したページに移動すると、ページは通常ブラウザキャッシュから読み込まれます.サーバに新たなウェブページの送信を要求するのではなく、ブラウザキャッシュから読み込まれます.
3.2 History.pusState()
ヒストリカルに記録を追加する方法

window.history.pushState(state, title, url)

この方法は三つのパラメータを受けて、順次にstate:追加された記録に関連する状態オブジェクトであり、主にpopstateイベントに使用される.このイベントがトリガされると、オブジェクトはコールバック関数に入ります.つまり、ブラウザは、このオブジェクトをプログレッシブにしてローカルに残し、このページを再読み込みすると、このオブジェクトを入手することができます.この対象が必要でない場合はここでnullを記入できます.title:新しいページのタイトルです.しかし、現在はすべてのブラウザがこのパラメータを無視していますので、ここでは空の文字列を書き込むことができます.url:新しいURLは、現在のページと同じドメインにある必要があります.ブラウザのアドレスバーにこのURLが表示されます.現在のウェブサイトがexample.com/pageAであると仮定して、pusState()の方法を使ってブラウズ記録(Historyオブジェクト)に新しいレコードを追加します.

var stateObj = { param: 'aaa' };
history.pushState(stateObj, 'page B', 'pageB.html');

新記録を追加すると、ブラウザのアドレスバーにexample.com/pageB.が表示されますが、PageB.にジャンプすることはありません.pageB.が存在するかどうかは確認されません.閲覧履歴の最新記録となります.このとき、アドレスバーに新しい住所(例えば、wwww.baidu.comにアクセスする)を入力して、後退ボタンをクリックしたら、ページのURLがPageB.と表示されます.後戻りボタンをもう一度クリックしたら、URLにpageA.が表示されます.つまり、pusshState()メソッドはページの更新をトリガしません.ただし、Historyオブジェクトが変化し、アドレスバーが反応します.この方法を使用すると、ステータスオブジェクトはHistory.state属性で読み出すことができます.

history.state // { param: 'aaa' }

3.3 History.replace State()
History.replace State()メソッドは、Historyオブジェクトの現在の記録を修正するために使用されます.他の方法はpusshState()と同じです.現在のウェブページをexample.com/exampleと仮定します.

history.pushState({page: 1}, 'title 1', '?page=1')
// URL     http://example.com/example.html?page=1
history.pushState({page: 2}, 'title 2', '?page=2');
// URL     http://example.com/example.html?page=2
history.replaceState({page: 3}, 'title 3', '?page=3');
// URL     http://example.com/example.html?page=3
history.back()
// URL     http://example.com/example.html?page=1
history.back()
// URL     http://example.com/example.html
history.go(2)
// URL     http://example.com/example.html?page=3

4.popstate事件
同じ文書の閲覧履歴(すなわち、historyオブジェクト)が変化するたびに、popstateイベントが発生します.このイベントは、pusState()方法またはreplace State()方法を呼び出してもトリガされません.ブラウザのバックボタンと前進ボタンをクリックするか、またはJavaScriptを使ってHistory.back()、History.forward()、History.go()メソッドを呼び出すとトリガします.また、イベントは同じドキュメントに対してのみ行われ、ブラウズ履歴が切り替わると、異なるドキュメントが読み込まれます.イベントはトリガされません.使用する場合は、popstateイベントのためにコールバック関数を指定することができます.

window.onpopstate = function (event) {
  console.log('location: ' + document.location);
  console.log('state: ' + JSON.stringify(event.state));
};

//   
window.addEventListener('popstate', function(event) {
  console.log('location: ' + document.location);
  console.log('state: ' + JSON.stringify(event.state));
});

コールバック関数のパラメータは、イベントオブジェクトであり、そのstate属性は、現在のURLに提供されている状態オブジェクト(すなわち、この2つの方法の最初のパラメータ)を指しています.上のコードのevent.stateは、pusStateとreplacceStateの方法によって、現在のURLに結びつけられたstateオブジェクトです.