window.location / history

// 現在のURLを取得します。
var url = window.location.href;

// ページを移動します。
window.location.href = "移動先のURL";

// ページを再読み込みします。
window.location.reload();

// ブラウザの履歴を操作します。
window.history.back();
window.history.forward();
window.history.pushState(状態, タイトル, "URL");

// 現在のURL情報を取得する例
// URL: https://example.com/products/list.html?id=123#section1
console.log(location.href);     // 『https://example.com/products/list.html?id=123#section1』と出力されます。
console.log(location.hostname); // 『example.com』と出力されます。
console.log(location.pathname); // 『/products/list.html』と出力されます。
console.log(location.search);   // 『?id=123』と出力されます。
console.log(location.hash);     // 『#section1』と出力されます。

// ページ遷移
location.href = "https://example.com/new-page"; // 新しいページに移動します。
location.replace("https://example.com/login"); // 履歴に残さずに移動します。
location.reload(); // ページを再読み込みします。

// 履歴操作
history.back(); // 1つ前のページに戻ります。
history.go(-2); // 2つ前のページに戻ります。

// pushState()でURLを変更します。ページの再読み込みは発生しません。
history.pushState({ page: 2 }, "", "/products?page=2");

URL情報の取得部分を実行すると、コンソールには以下のように出力されます。

"https://example.com/products/list.html?id=123#section1"
"example.com"
"/products/list.html"
"?id=123"
"#section1"

『window.location』は現在のページのURL情報を管理するオブジェクトです。URLの各部分を個別に取得できるため、ページのパスやクエリ文字列に応じた処理を行う際に活用します。

『window.history』はブラウザの閲覧履歴を操作するためのオブジェクトです。『history.pushState()』を使うとページを再読み込みせずにURLを変更でき、ReactやVue.jsなどのフレームワークで構築するシングルページアプリケーションのルーティングで欠かせない機能となっています。

『location.href』と『location.replace()』はどちらもページを移動しますが、『location.replace()』は履歴に残らないため、ブラウザの「戻る」ボタンで元のページに戻ることができません。ログイン後のリダイレクトなど、ユーザーに戻ってほしくないケースで使い分けてください。