popstateイベントに関する個人的備忘録[JavaScript]

先日仕事にて、popstateイベントを使う機会があったのですが、個人的に久しぶりに使ったこともあってからなのか、まるで内容を忘れていました笑

ということで、完全に個人用ですが、popstateイベントについてまとめてみたいと思います!

popstateイベントとは??

冒頭いきなりMDNを掲載してしまいますが笑

popstateイベントは、ユーザーがブラウザ上で履歴操作される際に発行されるイベントです。

わかりやすい事例でいうと、ブラウザの進む・戻る操作をするときに発生するイベントと考えればOKということですね!

今回僕が仕事で当たったpopstateを使用する際の事例

今回僕が仕事で当たったpopstateイベントの使用事例は以下の通りです。

簡単にいうと、何らかのAPIからGETでデータを取得し、それを一覧に表示させるものを作りました。

その際、検索条件を細かく設定すると、URLにパラメーター(?country=japan&…みたいな感じ)が付与されるというものです。

実装していく中で、あるパラメーター(?country=japan&count=10)の状態からあるパラメーターの状態(?country=japan&count=5)に戻る(ブラウザバック)ときに、URLに変化はあるものの、画面に表示される検索結果の内容が変更されないという状態がありました。

本来、先ほど提示したパラメーター間の推移であれば、表示件数が10件→5件になるべきなんですよね。

なので、しっかりと表示件数の変更が反映されるように、popstateイベントを使用するわけですね!

まとめ

ということで、今回はpopstateイベントに関する個人的備忘録[JavaScript]を書かせていただきまいた!

シェアする

  • このエントリーをはてなブックマークに追加

フォローする