概要: このチュートリアルでは、JavaScript の `history` オブジェクトを使用して、ブラウザのセッション履歴にアクセスする方法を学習します。
JavaScript history オブジェクトの紹介。
Web ブラウザを起動して新しいWebページを開くと、Webブラウザはその履歴スタックに新しいエントリを作成します。
別のWebページに移動すると、Webブラウザは履歴スタックに新しいエントリを作成します。
履歴スタックには、現在のページと以前にアクセスしたページが保存されます。
`history` オブジェクトは、`window` オブジェクトのプロパティであり、履歴スタックを操作するために使用します。
window.historyCode language: JavaScript (javascript)セキュリティ上の理由から、ユーザーがアクセスしたページを問い合わせることはできません。ただし、`history` オブジェクトを使用すると、正確なURLを知る必要なく、前後へ移動できます。
ナビゲーションのためのJavaScript history の使用
history オブジェクトは、履歴スタック内のページ間を移動するための3つのメソッドを提供します。
-
back() -
forward() -
go()
後方へ移動
`back()` メソッドを使用すると、履歴をさかのぼることができます。
window.history.back();Code language: CSS (css)または
history.back();Code language: CSS (css)これは、Webブラウザのツールバーの**戻る**ボタンをクリックするのと同じ動作をします。
前方へ移動
同様に、`forward()` メソッドを使用して前方へ移動できます。
history.forward();Code language: CSS (css)これは、**進む**ボタンをクリックするのと同じように機能します。
履歴内の特定のURLへ移動
`go()` メソッドを使用すると、履歴スタック内の特定のURLに移動できます。`go()` メソッドは、現在のページに対する相対位置を表す整数を引数として受け取ります。現在のページの位置は0です。
たとえば、後方へ移動するには、以下を使用します。
history.go(-1);Code language: CSS (css)これは `back()` メソッドと同じです。
ページを前方に移動するには、以下のように呼び出します。
history.go(1)Code language: CSS (css)現在のページを更新するには、`go()` メソッドに0を渡すか、引数を渡しません。
history.go(0);
history.go();Code language: CSS (css)履歴スタック内のURLの数を判別するには、`length` プロパティを使用します。
history.lengthCode language: CSS (css)まとめ
- `window.history` オブジェクトを使用すると、ブラウザの履歴スタックにアクセスできます。
- 履歴内のURLに移動するには、`back()`、`forward()`、`go()` メソッドを使用します。
- `history.length` は、履歴スタック内のURLの数を返します。
