HTML5より前は、location.hashからコンテンツをリロードしたりハッキングしたりすることなく制御および管理できなかった唯一のことは、1つのタブの履歴だけでした。
HTML5履歴APIの出現により
、すべてが変更されました-履歴を歩き回り（以前も可能）、履歴に要素を追加し、履歴に沿ったトランジションやその他の有用性に対応できます。 この記事では、HTML5 History APIを見て、その機能を示す簡単な例を作成します。
基本的な概念と構文
History APIは、1つのDOMインターフェイス-Historyオブジェクトに依存しています。 各タブには、
window.historyある一意のHistoryオブジェクトがあります。 履歴には、JavaScriptから制御できるいくつかのメソッド、イベント、およびプロパティがあります。 各タブページ（ドキュメントオブジェクト）は、Historyコレクションのオブジェクトです。 ストーリーの各要素は、URLおよび/または状態オブジェクト（状態オブジェクト）で構成され、タイトル（タイトル）、ドキュメントオブジェクト、フォームデータ、スクロール位置、およびページに関連するその他の情報を持つことができます。
Historyオブジェクトの主なメソッド：
window.history.length ：現在の履歴セッションのエントリ数window.history.state ：現在の履歴オブジェクトを返しますwindow.history.go(n) ：歴史を歩き回ることができるメソッド。 引数は、現在位置からのオフセットです。 0が渡されると、現在のページが更新されます。 インデックスが履歴を超えた場合、何も起こりません。window.history.back() ： go(-1)を呼び出すのと同じメソッドwindow.history.forward() ： go(1)を呼び出すのと同じメソッドwindow.history.pushState(data, title [, url]) ：履歴要素を追加します。window.history.replaceState(data, title [, url]) ：現在の履歴アイテムを更新します
履歴を2ステップ戻すには、次を使用できます。
history.go(-2)
ストーリーアイテムを追加するには、
history.pushStateを使用できます
history.pushState history.pushState({foo: 'bar'}, 'Title', '/baz.html')
履歴レコードを変更するには、
history.replaceStateを使用できます
history.replaceState history.replaceState({foo: 'bat'}, 'New Title')
生きている例
これで基本がわかったので、実際の例を見てみましょう。 選択した画像のURIを見つけることができるWebファイルマネージャーを実行します（
最後に何が起こるかを参照してください ）。 ファイルマネージャは、JavaScriptで記述された単純なファイル構造を使用します。 ファイルまたはフォルダーを選択すると、画像が動的に更新されます。
data-*属性を使用して各画像のタイトルを保存し、データセットプロパティを使用してこのプロパティを取得します。
<li class="photo"> <a href="crab2.png" data-note="Grey crab!">crab2.png</a> </li>
すべてが迅速に機能するように、すべての画像をロードし、
src属性を動的に更新します。 この加速は1つの問題を引き起こします-それはボタンを破壊するので、写真を前後に進めることはできません。
HTML5の歴史が助けになります！ ファイルを選択するたびに、新しい履歴レコードが作成され
locationドキュメントの
locationが更新されます（一意の画像URLが含まれます）。 これは、戻るボタンを使用して画像をバイパスできることを意味します。一方、アドレスバーには画像への直接リンクがあり、ブックマークに保存したり、誰かに送信したりできます。
コード
2人のディーバがいます。 1つにはフォルダー構造が含まれ、もう1つには現在の画像が含まれます。 アプリケーション全体はJavaScriptを使用して管理されます。 最も重要なポイントのみが強調表示されます。
この例のソースコードは非常に短く（約80行）、記事全体を読ん
だ後に参照し
てください。
bindEventsメソッドは
popstateイベントのハンドラーを
bindEventsます
popstateイベントは、ユーザーが履歴を
popstateときに呼び出され、アプリケーションがその状態を更新できるようにします。
window.addEventListener('popstate', function(e){ self.loadImage(e.state.path, e.state.note); }, false);
popstateイベント
popstate渡される
eventオブジェクトには
stateプロパティがあります。これは、
pushStateまたは
replaceState最初の引数として渡したデータです。
ファイル構造を表すdivの
clickイベントにハンドラーをアタッチします。 イベントの委任を使用して、フォルダーを開閉するか、写真をアップロードします（履歴にエントリを追加します）。 どの要素をクリックしたかを理解するために
className親要素の
classNameを確認します。
-これがフォルダである場合、それを開いたり閉じたりします
-これが写真である場合、それを表示し、履歴の要素を追加します
dir.addEventListener('click', function(e){ e.preventDefault(); var f = e.target;
画像の内容を変更し、署名を更新する方法は非常に簡単です。
loadImage: function(path, note){ img.src = path; h2.textContent = note; }
Historyオブジェクトの更新されたインターフェースの機能を実証する
簡単なアプリケーションを得ました。
pushStateを使用してストーリーアイテムとpopstateイベントを追加し、ページのコンテンツを更新します。 さらに、画像をクリックすると、アドレスバーにその実際のアドレスが表示されます。これを保存したり、誰かに送信したりできます。
いつ使用できますか？
Firefox 4以降
Safari 5以降
Chrome 10以降
Opera 11.5+
iOS Safari 4.2以降
Android 2.2以降
IE ???
履歴APIをサポートする
ブラウザーのリストどこで使用されていますか？
1.
Facebook2.
Github-プロジェクトツリーのナビゲーション
3. ???
読む
1.
楽しみと利益のために歴史を操作する2.
WHATWG HTML5履歴API3.
W3C履歴API仕様4.
ブラウザの履歴を操作する MDC
5.
History.js-スクリプトは、HTML5履歴API（location.hashマジック）をエミュレートしますが、これをサポートしていないブラウザーでは