Location Object

The Location Object is a part of the Browser Object Model (BOM) in JavaScript. It represents the current URL of the browser and provides methods and properties to read or manipulate it. The object is accessible via window.location (or simply location) and allows developers to redirect, reload, or parse the URL.

The Location Object is commonly used for:

• Redirecting users to different pages.
• Reloading the current page.
• Parsing the URL for query parameters or hash values.
• Detecting the current page’s protocol, host, or pathname.

Key Properties of the Location Object

location.href – Returns the full URL of the current page. Can also be used to navigate to a new URL.

console.log(location.href);
// Redirect to another page
location.href = "<https://www.example.com>";

location.protocol – Returns the protocol of the current URL (http: or https:).

console.log(location.protocol);

location.host – Returns the hostname and port of the URL.

console.log(location.host); // e.g., "www.example.com:80"

location.hostname – Returns only the hostname of the URL.

console.log(location.hostname); // e.g., "www.example.com"

location.port – Returns the port number of the URL.

console.log(location.port); // e.g., "80"

location.pathname – Returns the path of the URL after the domain.

console.log(location.pathname); // e.g., "/folder/page.html"

location.search – Returns the query string of the URL, including the ?.

console.log(location.search); // e.g., "?id=123&name=John"

location.hash – Returns the fragment identifier of the URL, including the #.

console.log(location.hash); // e.g., "#section1"

location.origin – Returns the protocol, hostname, and port of the URL.

console.log(location.origin); // e.g., "<https://www.example.com:443>"

Key Methods of the Location Object

location.assign(url) – Loads the provided URL. Similar to setting location.href.

location.assign("<https://www.example.com>");

location.replace(url) – Replaces the current URL with a new one without saving the current page in the session history.

location.replace("<https://www.example.com>");

location.reload(forceReload) – Reloads the current page. If true is passed, it reloads from the server, bypassing cache.

location.reload();       // Reloads normally
location.reload(true);   // Reloads from server

Practical Examples

Display Current URL Components

Displays the full URL, protocol, host, pathname, query string, hash, and origin.

<h1>Location Info</h1>
<p id="demo"></p>

<script>
const info = `
  Full URL: ${location.href} <br>
  Protocol: ${location.protocol} <br>
  Host: ${location.host} <br>
  Pathname: ${location.pathname} <br>
  Query: ${location.search} <br>
  Hash: ${location.hash} <br>
  Origin: ${location.origin}
`;
document.getElementById("demo").innerHTML = info;
</script>

Redirect to Another Page

Redirects the user. replace doesn’t allow going back to the previous page via browser back button.

// Redirect user to example.com
location.href = "<https://www.example.com>";

// Or using assign
location.assign("<https://www.example.com>");

// Or replace (no history)
location.replace("<https://www.example.com>");

Reload Current Page

Refreshes the current page, useful for dynamic updates or auto-refresh features.

// Reload page from cache
location.reload();

// Reload page from server
location.reload(true);

Detect and Use URL Parameters

Parses query parameters from the URL using URLSearchParams.

<!-- URL: https://example.com?user=John&id=123 -->
<script>
const params = new URLSearchParams(location.search);
const user = params.get("user");
const id = params.get("id");

console.log("User:", user); // John
console.log("ID:", id);     // 123
</script>