操作ブラウザの履歴

windowオブジェクトは、historyオブジェクトを介して、ビューア履歴へのアクセスを提供する.非常に有用な方法と属性が暴露され、履歴の中で自由に前進したり後退したりすることができますが、HTML 5では履歴のデータを操作することができます.
履歴の概要
back(),forward()およびgo()メソッドにより,ユーザの履歴において前進および後退することができる.
前進と後退
履歴で後退するには、次のようにします.

window.history.back();

これは、ユーザーがブラウザの後退ボタンをクリックしたようなものです.
ブラウザで前進ボタンをクリックするように、前進することができます.

window.history.forward();

指定した履歴ポイントに移動
現在のページ位置に対する数値を指定することで、go()メソッドを使用して、現在のセッションの履歴からページをロードできます(現在のページ位置インデックス値は0、前のページは-1、次のページは1).
1ページ後退するには(back()を呼び出すのと同じ):

window.history.go(-1);

1ページ前に移動(forward()を呼び出すのと同じ):

window.history.go(1);

同様に、パラメータ「2」を渡すと、2ページ前に移動できます.
lengthプロパティ値を表示して、履歴スタックに合計何ページあるかを知ることができます.

var numberOfEntries = window.history.length;

注意:IEではgo()メソッドにURL文字列パラメータを渡すことができ、これは非標準的なメソッドであり、Geckoはサポートされていない.
履歴エントリの追加と変更
 
Gecko 2以上に適用(Firefox 4/Thunderbird 3.3/SeaMonkey 2.1)
 
HTML 5はhistoryを導入しました.PushState()メソッドとhistory.replaceState()メソッドでは、履歴エントリを1つずつ追加および変更できます.これらの方法は、window.onpopstateイベントと協働して動作することができる.
historyを使うPushState()はrefererの値を変更し、メソッドを呼び出した後に作成されたXMLHttpRequestオブジェクトはHTTPリクエストヘッダでこの値を使用します.refererの値はXMLHttpRequest  ウィンドウを作成するURLです.
ケース
仮定http://mozilla.org/foo.html次のJavaScriptコードが実行されます.

var stateObj = { foo: "bar" };

history.pushState(stateObj, "page 2", "bar.html");

ブラウザのアドレスバーが表示されますhttp://mozilla.org/bar.htmlバーはロードされませんhtmlページもbarをチェックしません.htmlが存在するかどうか.
ユーザーがナビゲートしたとしますhttp://google.comをクリックし、戻るボタンをクリックすると、アドレスバーが表示されますhttp://mozilla.org/bar.htmlを選択すると、ステータスオブジェクト(state object)にstateObjのコピーが含まれているpopstateイベントがページにトリガーされます.このページはfooのように見えます.htmlは、popstateイベントでページ内容が変更される可能性がありますが.
再度戻るボタンをクリックするとURLが戻りますhttp://mozilla.org/foo.htmlを選択すると、ドキュメントはnullのステータスオブジェクトである別のpopstateイベントをトリガーします.ロールバックは、ドキュメントの内容を変更しません.
PushState()メソッド
pushState()には、3つのパラメータがあります.1つのステータスオブジェクト、1つのタイトル(現在は無視されます)、1つのオプションのURLアドレスです.この3つのパラメータの詳細を個別に考察します.

ステータスオブジェクト(state object)-pushState()メソッドで作成した新しい履歴エントリに関連付けられたJavaScriptオブジェクト.ユーザーが新しく作成したステータスにナビゲートするたびにpopstateイベントがトリガーされ、イベントオブジェクトのstateプロパティには履歴エントリのステータスオブジェクトのコピーが含まれます.シーケンス可能なオブジェクトは、ステータスオブジェクトとして使用できます.FireFoxブラウザはステータスオブジェクトをユーザーのハードディスクに保存するので、ユーザーがブラウザを再起動した後に復元することができ、ステータスオブジェクトのサイズを640 kに強制的に制限します.PushState()メソッドに限度額を超えるステータスオブジェクトを渡すと、メソッドは例外を放出します.大きなデータを格納する必要がある場合は、sessionStorageまたはlocalStorageを使用することをお勧めします.

タイトル-FireFoxブラウザでは、後で使用する可能性がありますが、このパラメータは無視されます.将来、このメソッドが変更される可能性があることを考慮すると、空の文字列を渡すのは安全です.または、入るステータスを示す短いタイトルを入力することもできます.

アドレス(URL):新しい履歴エントリのアドレス.ブラウザはpushState()メソッドを呼び出した後にアドレスをロードしませんが、その後、ユーザーがブラウザを再起動するなど、ロードしようとする可能性があります.新しいURLは必ずしも絶対パスではありません.相対パスの場合、現在のURLを基準にします.入力されたURLは現在のURLと同源であるべきで、そうでなければpushState()は異常を投げ出す.このパラメータはオプションです.指定しないとドキュメントの現在のURLになります.

注意:Gecko 2.0(Firefox 4/Thunderbird 3.3/SeaMonkey 2.1)からGecko 5.0(Firefox 5.0/Thunderbird 5.0/SeaMonkey 2.2)では、入力されたオブジェクトはJSONを使用してシーケンス化されます.Gecko 6.0(Firefox 6.0/Thunderbird 6.0/SeaMonkey 2.3)から、オブジェクト使用
構造化コピーアルゴリズムでシーケンス化されます.これにより、より多くのタイプのオブジェクトが安全に転送されます.
ある意味pushState()を呼び出すのはwindowの設定に似ている.location='#foo'は、現在のドキュメント内で新しい履歴エントリを作成およびアクティブにします.しかしpushState()には独自のメリットがあります.

の新しいURLは任意の同源URLであるもよく、これに対してwindowを用いる.locationメソッドの場合、hashを変更するだけで同じdocumentにとどまることが保証されます.

個人の必要に応じてURLを変更するかどうかを決定します.逆にwindowを設定します.location='#foo'は、現在のhash値がfooでない場合にのみ新しい履歴を作成します.

新しい履歴エントリに抽象データを追加できます.hashベースの方法を使用すると、関連データを短い文字列に符号化するしかありません.

pushState()メソッドは、新しいアドレスがhashのみを変更してもhashchangeイベントをトリガーしません.
replaceState()メソッド
history.义齿pushState()は、replaceState()メソッドが新しいエントリを作成するのではなく、現在の履歴エントリを変更する点で異なります.
ユーザのいくつかの操作に応答するために、現在の履歴エントリのステータスオブジェクトまたはURLを更新する場合は、replaceState()メソッドを使用すると特に適しています.
注意:Gecko 2.0(Firefox 4/Thunderbird 3.3/SeaMonkey 2.1)からGecko 5.0(Firefox 5.0/Thunderbird 5.0/SeaMonkey 2.2)では、入力されたオブジェクトはJSONを使用してシーケンス化されます.Gecko 6.0(Firefox 6.0/Thunderbird 6.0/SeaMonkey 2.3)から、オブジェクト使用
構造化コピーアルゴリズムでシーケンス化されます.これにより、より多くのタイプのオブジェクトが安全に転送されます.
popstateイベント
アクティブ化された履歴が変化するたびにpopstateイベントがトリガーされます.アクティブ化された履歴エントリがpushStateによって作成された場合、またはreplaceStateメソッドによって影響された場合、popstateイベントのステータスプロパティには履歴のステータスオブジェクトのコピーが含まれます.
ケースはwindow.onpopstate
現在の状態の読み込み
ページがロードされると、空でないステータスオブジェクトが含まれる場合があります.この場合、たとえばページでpushState()またはreplaceState()メソッドを使用してステータスオブジェクトを設定した場合、ユーザーはブラウザを再起動します.ページが再ロードされるとonloadイベントがトリガーされますが、popstateイベントはトリガーされません.でもhistoryを読むとstateプロパティでは、popstateイベントがトリガーされたときと同じステータスオブジェクトが得られます.
popstateイベントを待つことなく、現在の履歴エントリのステータスを直接読み込むことができます.

var currentState = history.state;

ブラウザの互換性
 
Desktop  

Mobile

Feature
Chrome
Firefox (Gecko)
Internet Explorer
Opera
Safari
replaceState, pushState
5
4.0 (2.0)
10
11.50
5.0
history.state
18
4.0 (2.0)
10
11.50
6.0
 
ブラウザ間互換性History.jsを解決するには、に質問が必要です.
その他の資料

window.history

window.onpopstate