ブラウザ操作の履歴-historyオブジェクト

Windowsオブジェクトはhistoryオブジェクトを介してビュー履歴へのアクセスを提供します.HTML 5では、historyオブジェクトがブラウザ履歴を操作する機能も備えています.
履歴アクセス
lengthプロパティは、履歴オブジェクトの長さにアクセスできます.

history.length

forwardとbackの方法はブラウザの前進と後退機能のようなものです.

history.forward()
history.back()

goメソッドは、現在のページに対するインデックス値を指定することによって、対応するレコードにジャンプすることができる.

history.go(1)    #     histroy.forward()
hsitory.go(-2)

操作履歴
JavaScriptに関するほとんどの本から見ることができるように、ajaxのブームは大衆にJavaScriptという言語を直視させ始めたが、ajaxが構築したオンラインアプリケーションには、ブラウザの後退と前進機能を有効に利用できないというよく知られた問題がある.この問題もHTML 5仕様で効果的に解決された.pushStateメソッドとreplaceStateメソッドを使用すると、ブラウザの履歴を追加または変更できます.
PushStateメソッドでは、現在のページアドレスを最近の履歴として保存し、現在のページアドレスを変更できます.ただし、ページはロードされません.
現在のページアドレスをhttp://www.example.com/page1コードは次のとおりです.

history.pushState({foo: "bar}, "page 2", "/page2");
history.back();    #     http://www.example.com/page1

コードの概略的なプロセスは簡単で、pushStateのパラメータを具体的に見て、全部で3つのパラメータがステータスオブジェクト、タイトル、URLであることを受け入れます.

URL:URLが具体的なアドレス(改めて説明しますが、アドレスバーのアドレスを変更しましたが、ページは自発的にロードされません)であってもよいし、絶対アドレスであってもよいが、入力アドレスは現在のアドレスと同源でなければなりません.そうしないと、エラーが発生します.

タイトル:入力するステータスを示す短いタイトル.しかし、現在のブラウザのほとんどは無視され、空の文字列

に送信できます.

ステータスオブジェクト:作成した履歴に関連付けられたJavaScriptオブジェクト.ユーザが履歴にアクセスするとpopstatgeイベント(下に説明がある)がトリガーされ、イベントオブジェクトのstateプロパティがこのステータスオブジェクトのコピーになります.

一つはhistoryを使うことですpushState()はreferrerの値を変更しますが、メソッドを呼び出した後に作成したXMLhttpRequestオブジェクトはHTTPリクエストヘッダでこの値を使用します.2つ目は、pushStateメソッドがhashchangeイベントをトリガーすることはありません.新しいアドレスがhashだけを変更しても.
replaceStateメソッドはpushStateとよく似ています.違いは、新しい履歴エントリを作成するのではなく、現在のページのアドレスを変更するだけです.
popstateイベント
履歴エントリがアクセスされるとpopstateイベントがトリガーされます.window.onpopstateはpopstateイベントのwindow上のイベントハンドルです.現在アクティブな履歴エントリがpushStateメソッドによって作成された場合、またはreplaceStateメソッドによって変更された場合、popstateイベントオブジェクトのstateプロパティには、この履歴エントリのstateオブジェクトのコピーが含まれます.

window.onpopstate = function(event) {
  alert("location: " + document.location + ", state: " + JSON.stringify(event.state));
};
 //        . 
 history.pushState({page: 1}, "title 1", "?page=1");    //              http://example.com/example.html?page=1,     1
 history.pushState({page: 2}, "title 2", "?page=2");    //              http://example.com/example.html?page=2,     2
 history.replaceState({page: 3}, "title 3", "?page=3"); //              http://ex..?page=2    http://ex..?page=3,     2
 history.back(); //    "location: http://example.com/example.html?page=1, state: {"page":1}"
 history.back(); //    "location: http://example.com/example.html, state: null
 history.go(2);  //    "location: http://example.com/example.html?page=3, state: {"page":3}

また、pushStateとreplaceStateバインドステータスオブジェクトにアクセスできるもう1つの方法は、現在のページで直接呼び出すことです.

history.state

現在のページが履歴エントリでアクセスされ、その履歴エントリがpushStateメソッドとreplaceメソッドで作成された場合、返される結果は、作成時にバインドされたステータスオブジェクトです.
参考資料:

https://developer.mozilla.org/zh-CN/docs/DOM/Manipulating_the_browser_history

https://developer.mozilla.org/zh-CN/docs/Web/API/Window.onpopstate