pushState()

JS

履歴に新しい状態(state)と URL を追加。ページ遷移せず URL を変更できる。

history.pushState(state, title, url)

使用例

 // URL を更新(ページ遷移なし)
  const newURL = `/search?query=${encodeURIComponent(query)}`;
  history.pushState({ query }, "", newURL);

// ブラウザ戻る/進む対応
window.addEventListener("popstate", (e) => {
  const query = e.state?.query || "";
  input.value = query;
  if (query) performSearch(query);
  else results.innerHTML = "";
});

「戻る」ボタンで前の検索語を復元して再検索

ページ遷移せず、ユーザーにシームレスな体験を提供

pushStateとpopstateはほぼセットで使われる