window.location and window.history in JavaScript

The window.location and window.history objects are fundamental browser interfaces in JavaScript responsible for managing the user’s web address and navigation session. While window.location provides information about the current URL and enables redirection or reloading, window.history allows programmatic manipulation of the browser’s session history stack. Together, they form the backbone of browser navigation and modern client-side routing in Single-Page Applications (SPAs).

Understanding window.location

The window.location object (or simply location) represents the current URL of the document. It functions as both a readable representation of the address bar and a tool to navigate to new pages.

Key Properties

• location.href: The entire URL string. Reading it returns the current address; setting it redirects the browser to a new URL.
• location.protocol: The protocol scheme of the URL (e.g., https: or http:).
• location.host: The host name and port number (e.g., example.com:8080).
• location.hostname: The domain name of the web host (e.g., example.com).
• location.pathname: The path section of the URL (e.g., /products/item).
• location.search: The query string containing parameters, starting with a question mark (e.g., ?id=123&sort=asc).
• location.hash: The fragment identifier, starting with a hash symbol (e.g., #section-2).

Key Methods

• location.assign(url): Loads the resource at the specified URL, adding an entry to the browser’s history list.
• location.replace(url): Loads the specified URL by replacing the current page in the history stack, preventing the user from using the “Back” button to return to the original page.
• location.reload(): Reloads the current document from the cache or server.

Understanding window.history

The window.history object (or simply history) provides access to the browser’s session history, containing the pages visited within the current tab or frame.

Basic Navigation Methods

• history.back(): Moves the user back one page in the session history, identical to clicking the browser’s back button.
• history.forward(): Moves the user forward one page in the session history.
• history.go(n): Moves the page by a specific relative delta. For example, history.go(-2) moves back two pages, while history.go(0) reloads the current page.
• history.length: Returns the number of elements in the session history.

The HTML5 History API (Client-Side Routing)

Modern web development relies heavily on the HTML5 History API to update the browser’s URL without triggering a full page reload.

• history.pushState(state, title, url): Adds a new entry to the history stack with custom state data and changes the displayed URL in the address bar.
• history.replaceState(state, title, url): Updates the current history entry without creating a new entry in the stack.
• popstate event: Dispatched to the window object when the active history entry changes due to user actions like clicking the back or forward buttons.

Summary of Differences

• Purpose: window.location focuses on the URL itself (parsing, redirecting, and reloading), whereas window.history focuses on the navigation sequence (traveling backward, forward, or updating route states).
• Navigation Behavior: Modifying window.location.href or calling location.assign() causes the browser to make a network request and reload the page. In contrast, using window.history.pushState() updates the URL dynamically on the client side, allowing JavaScript frameworks to render new views instantly without a server round-trip.