履歴に新しい状態(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はほぼセットで使われる