LoginSignup
27
17

More than 3 years have passed since last update.

JSでブラウザの履歴を操作する

Posted at

historyについて

JSではhistoryオブジェクトを使用して、ブラウザの履歴を操作することができる
ブラウザの戻るボタンを押した時に戻る場合など、この履歴に応じてページの遷移が行われている
ブラウザの履歴を操作する

historyは削除できない

追加や変更はできるようだが、historyの削除はできないよう

代替案

ケースバイケースだけど、もし消したいと思った場合に使えるかもしれないことがいくつかあったのでまとめ
A→B→C の遷移でCから戻る時にAに戻したいというケースを考えてみる(Bを消したい)

履歴を残さないで遷移させる

画面遷移時にlocation.replaceを使うと履歴が残らないようになる

BページからCページへ遷移する際に使用をすると、Bページの履歴が残らなくなる
そのため、Cページで戻るボタンを押すとその前にいたAページに戻ることができる

画面遷移:A→B→C
履歴:A→C

// page B → page C
location.replace('/C/')

参考
http://note.onichannn.net/archives/1443

履歴書き換えることはできる

前にいたーページをJSを使って書き換えることで、戻るボタンを押したおきにそのページに戻るようにする

A→B→Cの順番でページの遷移をしている場合、Cページで1つ前の履歴をAページとするとAページに戻れるが、A→A→Cという履歴になってしまうので注意が必要

画面遷移:A→B→C
履歴:A→A→C

// Cページで1つ前の履歴をAページとする
history.replaceState(null,null,"/A/");

戻るボタンクリック時に2つ戻す

戻るボタンをクリックすると、JSでC→B→Aと遷移をさせる

画面遷移:A→B→C
履歴:A→B→C

// 戻るボタンを押された時に何も処理を行わない
history.pushState(null, null, null);

// 戻るボタンを押した時の処理を追加
window.addEventListener("pushState", function() {
  // -2で2つ戻る(-1なら1つ戻る)
  history.go(-2);
})
27
17
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
27
17