HTML5の歴史（ページアプリケーションルータ基礎となる実装）

歴史
なhashchangeとpopstate

、歴史

history.back（）：履歴リストの前にURLを読み込みます
history.forward（）：次のURLの履歴リストを読み込みます
history.go（N）：特定の負荷のページの履歴一覧
history.length：履歴リストにURLの数を返します。
history.pushState（状態、タイトル、URL）：（HTML5）の歴史を追加
history.replaceState（状態、タイトル、URL）：現在の履歴（HTML5）を交換

パラメータのpushStateとreplaceState：

状態：popstateイベントがトリガされた関連する状態オブジェクト指定されたURLは、オブジェクトは、コールバックを渡します。あなたはヌルを埋めることができていないオブジェクト、もし。

タイトル：新しいページのタイトルが、すべてのブラウザは、現在ので、ここであなたはヌルを埋めることができ、この値を無視します。

URL：新しいURLは、ページには、現在と同じドメインになければなりません。ブラウザのアドレスバーにURLが表示されます。

二、歴史となhashchangeのpopstateイベント

なぜhistory.pushState（）とhistory.replaceState（）単一ページのアプリケーションが行う達成することができますか？

キーは、ブラウザのアドレスバーにURLを変更しますが、ページ全体を更新していない付加および置換歴史を実行するためにhistory.pushState（）とhistory.replaceState（）です。

イベントを変更する2人のリスナーのURLと歴史があります。

popstateイベント：トリガー（ページをバック切り替えブラウザ前方トリガー）履歴の変更
なhashchangeイベント：（ブラウザが前後のページを切り替えたときにトリガ）ページのハッシュ値は、トリガを変更した場合

ベースのpushStateとreplaceStateは、変更履歴を達成することができますが、あなたは、ブラウザが前後ボタンをのクリックだけでpushStateとreplaceStateの重要なパラメータを参照する必要性にURLアドレスバーに、この時間を変更するときは、前のページにフォールバックすることはできませんパラメータの状態。前後のブラウザは、この時間はちょうど前方を通じてpushState、ブラウザでreplaceState方式で記録されたデータ・ページの情報を追加するときpopstateEventオブジェクトの変更履歴、およびpopstateイベントがトリガされたときに、このパラメータが追加されます[戻る]ボタンはページを切り替えるとき、あなたはページを更新するpopstateEventイベントオブジェクトのpopstateイベントに係る情報のデータページを取得することができます。

単一ページに基づいて基本的な論理シミュレーションをPopstate：

1の<input type = "テキスト" ID = "searchWord"値= "">
 2の<input type = "ボタン" ID = "BTN"値= "提交">
 3 <DIV CLASS = "コンテンツ"> </ div>
 4 <スクリプト>
 5      のvarデータ= [{名： "HTML"}、{名： "CSS"}、{名： "ジャバスクリプト"}、{名： "ES6"}、{名： "VUE"}、{名前： "nodejs" }];
6      
7      VaRの含有量= document.getElementsByClassName（ 'コンテンツ'）[0 ];
8      VARの BTN =のdocument.getElementById（ 'BTN' ）;
9      のvar INP =のdocument.getElementById（ 'searchWord' ）;
10      btn.onclick = 関数（）{
 11          VARshowData = data.filter（関数（アイテム）{
 12              リターン item.name.indexOf（inp.value）> -1 ;
 13          }）。
14          renderDom（showData）。
15          history.pushState（{
 16              値：inp.value
 17          }、NULL、 '＃' + inp.value）。
18      }
 19      関数renderDom（データ）{
 20          VARの STR = '' ;
21          のための（VAR I = 0; iはdata.lengthを<; iは++ ）{
 22              STR + = 'の<div>' +データ[I] .nameの+ '</ div>'
23          }
 24          content.innerHTML = STR。
25      }
 26      renderDom（データ）。
27      window.addEventListener（ 'popstate'、関数（E）{
 28          VaRの値= e.state e.state.value：？ '' ;
 29          VAR showData = data.filter（関数（アイテム）{
 30              はconsole.log（E ）;
 31              戻り item.name.indexOf（値）> -1 ;
 32          }）;
 33          inp.value = 値;
 34          renderDom（showData）;
 35      }、偽）
 36 </ SCRIPT>

結果を実現：

しかし、比較的なhashchangeイベント、IE8の互換性のなhashchange、IE10にのみ対応popstateイベントなので、単一ページのアプリケーションより多くのアプリケーションの互換性popstateイベントが実現するなhashchangeイベントですが、比較的popstateイベントは、歴史に得ることができます。 pushStateオブジェクトパラメータ（）とhistory.replaceState（）の状態なhashchangeイベントデータ転送は、ハッシュ値によって達成することができ、通過します。

1 window.addEventListener（ 'なhashchange'、関数（E）{
 2      にconsole.log（location.hash）; // 获取ハッシュ值
3 }）