JavaScript History API

久しぶりに触った。例によってマップの実装に使った訳だが。

プラウザの履歴をゴニョゴニョできる API だが,適当に使うのは割と簡単。

history.pushState(null, null, '?foo=bar');

みたいな感じで URL のクエリを書き換えたりとかできる。 MDN を見たら第一引数と第二引数にいろいろ渡していたが,めんどくさいので null でよさそう。

書き換えを listen する方は,

window.addEventListener('popstate', () => {
    // なんか処理
});

とかでよさそう。これが呼ばれたときには URL が書き換わっているので, それを location.href とかで取ればよさそうな気がする。 真面目にやるなら push したときの値を受け取って使う感じになるんだろうけど。

onload と同時に popstate が起こるブラウザもあるらしい。怖いよ〜。

参考