JavaScript window.history

historyはJavaScriptからブラウザのURL履歴を取得できるAPIです。この記事では、historyの使い方をご紹介します。

historyオブジェクトはwindowオブジェクトの一部であり、window.historyプロパティを通じてアクセスできる。

Table of Contents

1. 1 プロパティ
2. 1. 1.1 length
   2. 1.2 scrollRestoration
   3. 1.3 state
3. 2 メソッド
4. 1. 2.1 go
   2. 2.2 back
   3. 2.3 forward
   4. 2.4 pushState
   5. 2.5 replaceState

1 プロパティ

1.1 length

履歴リスト内のURL数

<p id="l"></p>
<script>
  document.querySelector("#l").innerHTML = history.length;
</script>

1.2 scrollRestoration

アクティブなセッションヒストリーエントリーのスクロールリストアモード

<p id="sr"></p>
<script>
  document.querySelector("#sr").innerHTML = history.scrollRestoration;
</script>

1.3 state

アクティブなセッション履歴エントリーの状態

<p id="s"></p>
<script>
  document.querySelector("#s").innerHTML = history.state;
</script>

2 メソッド

2.1 go

history.go(n)

指定した数だけ画面を進めます。たとえば、1を指定した場合は1つ進みます。-2 を指定した場合は2つ戻ります。

<a href="javascript:history.go(-1)">戻る</a>

戻る

2.2 back

ブラウザの「戻る」ボタンをクリックしたのと同じ動作をします。

history.back()

<a href="javascript:history.back()">戻る</a>

戻る

<button onclick="history.back()">戻る</button>

戻る

2.3 forward

history.forward()

ブラウザの「進む」ボタンをクリックしたのと同じ動作をします。

<a href="javascript:history.forward()">進む</a>

進む

2.4 pushState

セッション履歴に新しいエントリーを追加する。

history.pushState(data, "")

history.pushState(data, "", url)

2.5 replaceState

アクティブなセッション履歴エントリーのシリアライズされた状態を、構造化されたデータのクローンに更新する。

history.replaceState(data, "")

history.replaceState(data, "", url)

参考文献

Web Hypertext Application Technology Working Group (2023) APIs related to navigation and session history HTML Living Standard