History APIについて備忘録

ブラウザの戻るボタンを押した時に、ある処理を実装することがあった。そのときに立ちはだかるHistory APIなるもの。。
さくっとググってみた。
「ふむふむ、pushStateには引数を３つとるんだな。」
「引数にnullが２つ。第３引数にURLを設定？」となんとなく近寄り難い印象。
せっかくなので調べてやろうじゃないか。

https://developer.mozilla.org/ja/docs/Web/API/History_API

MDNによると、Windowオブジェクトは、ブラウザのセッション履歴を history を使って管理しているとのこと。

前ページや次のページ移動は、このような感じでかける。

window.history.back() 

👇このようにも書ける
window.history.go(-1)

window.history.forward()

👇このようにも書ける
window.history.go(1)

現在のページを再読み込みする、こんな感じ。

window.history.go(0)

👇このようにも書ける
window.history.go()

「あれ、以外と直感的に書けるじゃないか。」と少し気が楽になってきた！
ちなみに、 length で履歴スタックの中のページ数を取得できる。

window.history.length

ここまでは順調！と思ったら、いきなり先ほどの pushState のサンプルコードが。。
そこで、History インターフェースのページをみます。

History のプロパティ

length : integer
閲覧しているページを含むセッション履歴の数を integer で返す。新しくタブでページを読み込んだとき、 length の値は 1 となる。

scrollRestoration : 'auto' | 'manual'
戻る、進む操作のときスクロールの位置を復元するときの設定する。
auto
ユーザーがスクロールしたページ上のスクロールの位置が復元されます。
manual
ページ上のスクロール位置は復元されません。ユーザーが手動でその位置までスクロールする必要があります

state : any
履歴スタックの最上位にあるものの状態を返す。履歴スタックの一番上の状態です。
この値は pushState() や replaceState() が使われない限り null です。

History のメソッド

back
ユーザーがブラウザーの戻るボタンをクリックしたときと同じく、セッション履歴の一つ前のページへ移動します。 history.go(-1) と同等です。

forward
ユーザーがブラウザーの次へボタンをクリックしたときと同じく、セッション履歴の一つ次のページへ移動します。これは history.go(1) と同等です。

go
現在のページからの相対位置で識別されるページを非同期に読み出します。たとえば、 -1 は前のページで 1 は次のページです。範囲外の値を指定した場合 (例えば、セッション履歴に以前訪問したページがないときに -1 を指定した場合)、このメソッドは暗黙に何もしません。 go() を引数なし、または 0 の値で呼び出すと、現在のページを再読み込みします。

pushState : (state, unused, url?)
指定したタイトルとURLをセッション履歴に追加する。
state pushState() によって作られる新しい履歴項目に関連したJavaScriptオブジェクト。ユーザーが新規のstateに移動した時はいつも、 popstate が発行され、イベントのstateプロパティは、履歴のstateオブジェクトのコピーを含む。

url
新しい履歴項目のURLは、この値で与えられる。

replaceState
履歴スタックの最新の項目が、指定したデータ、タイトル、指定されていれば URL になるよう更新します。