historyオブジェクトとHTML 5 History API

一、ブラウザのhistoryオブジェクト
1.historyオブジェクトの概要
Historyオブジェクトはwindowオブジェクトの一部で、ユーザーがアクセスしたURLが含まれており、window.historyでアクセスできます.すべてのブラウザでこのオブジェクトがサポートされています.
2.historyオブジェクトのプロパティlength:履歴リストのURL数を返します.現在のウィンドウがウェブサイトにアクセスしている場合はhistory.lengthプロパティは1です.
3.historyオブジェクトメソッド

history.back():ブラウザの戻るボタンと同じ、前にアクセスしたページを返します.

history.forward():ブラウザの前進ボタンに等しい次のアクセスページに移動します.

history.go():パラメータは整数であり、history.go(-1)はhistory.backd()に等しい.history.go(1)はhistory.forward()に等しい.history.go(0)は、ページをリフレッシュすることに相当する.二、HTML 5のHistory API 1.HTML 5のHistory APIとブラウザのhistoryオブジェクトの違いは、新しいバージョンと古いバージョンの関係です.HTML 5のHistory APIは、DOM historyオブジェクトのwindowよりも2つの属性、2つの方法であるhistory スタック内のコンテンツに対する操作を提供するHTML 5である.書き方はいずれもhistoryとすることができる.2.追加された属性

History.state():履歴スタックの上部のステータスを表す値を返します.これは、popstateイベントを待たずにステータスを表示できる方法です.

History.scrollRestortion():Webアプリケーションが履歴ナビゲーション上でデフォルトのスクロールリカバリ動作を表示して設定できるようにします.この属性は、自動(auto)または手動(manual)であってもよい.

3.増加の方法

History.pushState():指定された名前とURL(このパラメータが指定されている場合)に従って、セッション履歴スタックにデータpushを入力します.データはDOMによって不透明に処理され、シーケンス化可能なjsオブジェクトを指定できます.

History.replaceState():指定したデータ、名前、およびURL(パラメータが指定されている場合)に従って、履歴スタック上の最新のエントリを更新します.このデータはDOMにより不透明に処理された.シーケンス化可能なjsオブジェクトを指定できます.

この2つの方法について詳しく説明します.pushState()には3つのパラメータが必要である:1つの状態オブジェクト、1つのタイトル(現在無視されている)、および(オプション)1つのURL.
ステータスオブジェクト-ステータスオブジェクトstateはJavaScriptオブジェクトで、pushState()を使用して新しい履歴エントリを作成します.いつユーザーが新しいステータスにナビゲートしてもpopstateイベントがトリガーされ、イベントのstateプロパティには履歴エントリステータスオブジェクトのコピーが含まれます.
ステータスオブジェクトは、シーケンス化できる任意のものであってもよい.なぜなら、Firefoxは、ユーザーのディスクにステータスオブジェクトを保存し、ユーザーがブラウザを再起動するときに使用するために、シーケンス化表示後にステータスオブジェクトに640 kのサイズ制限があることを規定しているからです.pushState()メソッドにシーケンス化された640 kより大きいステータスオブジェクトを渡すと、このメソッドは例外を放出します.より大きなスペースが必要な場合は、sessionStorageとlocalStorageを使用することをお勧めします.
タイトル-Firefoxは現在このパラメータを無視していますが、将来使用される可能性があります.空の文字列を渡すのはここでは安全ですが、将来的には安全ではありません.2つを選ぶと、ジャンプしたstateに短いタイトルを渡すことができます.
「URL」－このパラメータは、新しい履歴URLレコードを定義します.pushState()を呼び出すと、ブラウザはすぐにこのURLをロードしませんが、ユーザーがブラウザを再開した場合など、後でこのURLをロードする場合があります.新しいURLは絶対パスである必要はありません.新しいURLが相対パスである場合、現在のURLに対して処理されます.新しいURLは、現在のURLと同じソースでなければなりません.そうしないと、pushState()は例外を放出します.このパラメータはオプションで、デフォルトは現在のURLです.

var stateObj = { foo: "bar" };
history.pushState(stateObj, "page 2", "bar.html");

history.replaceState()の使用とhistory.pushState()は、replaceState()が新規ではなく現在の履歴項目を変更したことと非常に似ています.グローバルブラウザの履歴に新しい履歴アイテムを作成することはできません.
replaceState()の使用シーンは、ユーザーの操作に応答するために、ステータスオブジェクトstateまたは現在の履歴のURLを更新したい場合です.

history.replaceState(stateObj, "page 3", "bar2.html");

MDN関連紹介HTML 5 History API詳細