JS Location

JavaScript Location: URL Inspection, Redirection, & History Navigation

The window.location object represents the current URL location of the document. Modifying its properties or calling its methods navigates the browser to new URLs or reloads the page.

Location URL Parsing Anatomy

flowchart LR
    URLStr["https://kodersolution.com:8080/tutorials/js?topic=dom#section1"] --> Proto["protocol: 'https:'"]
    URLStr --> Host["host: 'kodersolution.com:8080'"]
    URLStr --> Path["pathname: '/tutorials/js'"]
    URLStr --> Search["search: '?topic=dom'"]
    URLStr --> Hash["hash: '#section1'"]

Location Properties & Methods Reference

Practical Code Example

// Demonstrating location inspection, URLSearchParams, and redirection

// 1. Inspecting Current Location Parts
console.log(`Current Protocol: ${location.protocol}`);
console.log(`Current Hostname: ${location.hostname}`);
console.log(`Current Pathname: ${location.pathname}`);

// 2. Parsing Query Parameters with URLSearchParams API
const queryParams = new URLSearchParams(location.search);
const category = queryParams.get("category"); // e.g. "?category=javascript"
console.log(`Parsed Category Query Param: ${category}`);

// 3. Navigation Helpers
function navigateToLogin() {
  // Option A: Standard Navigation (User can click Back button)
  location.assign("/login");

  // Option B: Redirection without back history entry (Authentication redirects)
  // location.replace("/login");
}

Best Practices & Gotchas

• Use location.replace() for Post-Login Redirects: Use location.replace() after successful login or logout so users cannot click the browser Back button to re-access unauthenticated pages.
• Use URLSearchParams for Query Strings: Use new URLSearchParams(location.search) to parse and extract query parameters cleanly instead of using custom regex.
• Sanitize Dynamic Redirects: Validate destination URLs before assigning to location.href to prevent Open Redirect security vulnerabilities.

Self-Check Challenge

What is the operational difference between location.assign(url) and location.replace(url)?