window.location / history

Retrieves information about the current page's URL and handles page navigation. Combined with window.history, you can also manipulate the browser's navigation history.

Syntax

// Get the current URL.
var url = window.location.href;

// Navigate to a page.
window.location.href = "destination URL";

// Reload the current page.
window.location.reload();

// Manipulate the browser history.
window.history.back();
window.history.forward();
window.history.pushState(state, title, "URL");

window.location Properties and Methods

Property / Method	Description
location.href	Returns the full URL of the current page as a string. Assigning a value navigates to that URL.
location.hostname	Returns the domain name, such as `example.com`.
location.pathname	Returns the path portion of the URL, such as `/products/list.html`.
location.search	Returns the query string of the URL, such as `?id=123&page=2`.
location.hash	Returns the hash portion of the URL, such as `#section1`.
location.protocol	Returns the protocol, such as `https:` or `http:`.
location.reload()	Reloads the current page.
location.replace("URL")	Navigates to the specified URL. Unlike `href`, the current page is not added to the browser history, so the user cannot go back using the browser's Back button.

window.history Methods

Method	Description
history.back()	Goes back to the previous page, equivalent to clicking the browser's Back button.
history.forward()	Goes forward to the next page, equivalent to clicking the browser's Forward button.
history.go(number)	Moves through the history by the specified number of steps. `-1` goes back one page, `1` goes forward one page, and `0` reloads the current page.
history.pushState(state, title, "URL")	Changes the URL without reloading the page and adds a new entry to the history. Used in single-page applications.
history.replaceState(state, title, "URL")	Changes the URL without reloading the page. Unlike `pushState()`, it replaces the current history entry rather than adding a new one.

Sample Code

// Example: retrieving current URL information
// URL: https://example.com/products/list.html?id=123#section1
console.log(location.href);     // Outputs "https://example.com/products/list.html?id=123#section1"
console.log(location.hostname); // Outputs "example.com"
console.log(location.pathname); // Outputs "/products/list.html"
console.log(location.search);   // Outputs "?id=123"
console.log(location.hash);     // Outputs "#section1"

// Page navigation
location.href = "https://example.com/new-page"; // Navigate to a new page.
location.replace("https://example.com/login"); // Navigate without adding to history.
location.reload(); // Reload the current page.

// History navigation
history.back(); // Go back to the previous page.
history.go(-2); // Go back two pages.

// Change the URL with pushState() — no page reload occurs.
history.pushState({ page: 2 }, "", "/products?page=2");

Overview

window.location is an object that manages URL information for the current page. Because you can access each part of the URL individually, it is useful when you need to perform operations based on the page path or query string.

window.history is an object for manipulating the browser's browsing history. Using history.pushState(), you can change the URL without reloading the page — a feature that is essential for client-side routing in single-page applications built with frameworks such as React or Vue.js.

Both location.href and location.replace() navigate to another page, but location.replace() does not add an entry to the browser history, so the user cannot return to the original page using the Back button. Use replace() in cases where you do not want the user to go back, such as a post-login redirect.