【解説】JavaScriptの「history」の使い方【履歴の前後】

【解説】JavaScriptの「history」の使い方【履歴の前後】

JavaScriptの「history」オブジェクトを使えば、ブラウザの履歴を前後に移動したりが可能です。

主な使い方がこちら

順に解説してきます。

➀：history.back();

history.back();

ブラウザ履歴のひとつ前に戻ることができます。

➁：history.forward();

history.forward();

ブラウザ履歴のひとつ先に進むことができます。

➂：history.go();

history.go();

// 2つ前に戻る
history.go(-2);

// 2つ先に進む
history.go(2);

// そのままのページでリロード
history.go(0);

goメソッドを使えば、中に入れた数値分ページの履歴を移動することができます。

④：history.length

const result = history.length;
console.log(result);

history.lengthを使えば、ブラウザ履歴の数を表示することができます。

⑤：history.pushState();

history.pushState(null, null, 'ここにURLを記述')

pushStateメソッドを使えば、ブラウザのアドレスバーのURLを読み込みなしで書き換えることができます。

つまり「https://jito-site.com」にて下記を実行すると・・・

history.pushState(null, null, '/test01');

「https://jito-site.com/test01」にアドレスバーのURLが変わります。
ただ読み込み処理はされません。

この後に戻るボタンをクリックすると「https://jito-site.com」に遷移します。

⑥：history.replaceState();

history.replaceState(null, null, 'ここにURLを記述')

replaceStateメソッドを使えば、ブラウザのアドレスバーのURLを読み込みなしで書き換えることができます。

ただ元のURLの履歴は残りません。

つまり「https://jito-site.com」にて下記を実行すると・・・

history.replaceState(null, null, '/test01');

「https://jito-site.com/test01」にアドレスバーのURLが変わります。
読み込み処理はされません。

履歴が残らないため、この後に戻るボタンをクリックしても「https://jito-site.com」に遷移しません。

⑦：history.state

history.pushState({page: 1}, null, '/test01');
console.log(history.state);

history.stateを使えば、history.pushStateやhistory.replaceStateで入れた第一引数のデータを、保持して状態管理することができます。

格納データはオブジェクト形式で扱われることが多いとのことで、{page: 1}を例として設定。

実行後、コンソールを見ると下記のstateオブジェクトを取得したものが反映されます。

page: 1

【解説】JavaScriptの「history」の使い方【履歴の前後】：まとめ

ジト

JavaScriptの「history」オブジェクトを使う時はためしてみてね！

ちなみに今のページのURL情報を取得する方法もありますよ↓

2024年11月23日 【解説】JavaScriptの「location」でURL情報を取得

コーディング知識を
『チート級』に得れる教材を作成！

見てみる⋙