The History Object and Location Object in Java Script

Ashish Bhatnagar
18h
164
0
0

Article

Introduction

In JavaScript, the history object represents the user’s browsing history for the current window. And the Location Object represents the current URL of the web page using displayed in the browser window. JavaScript provides several built-in objects that allow developers to interact with the browser and control web page navigation. Two important objects among them are history and location, both part of the Window object model. They play a significant role in managing the browser's session history and URL handling.

History Object

This object allows you to navigate through the browser’s history, including going back to previous pages, going forward to subsequent pages, or even loading a specific page from the history.

Properties and Methods

Property	Description
history.length	Returns the number of entries in the browsing history.
history.back()	Load the previous URL in the history list. Equivalent to clicking the browser’s back button.
history.forward()	Load the next URL in the history list. Equivalent to clicking the browser’s button.
history.go(Offset)	Loads a specific URL from the history list, where the offset parameter indicates the relative position in the history. A positive offset moves forward, and negative offset moves backward.
history.pushState(StateObj title, url)	Adds a new entry to the browser history, It allows you to change the URL displayed in the address bar without reloading the page.
history.replaceState(stateObj, title url)	Modifies the current entry in the browser history without creating a new entry.

These properties and methods of the history object provide programmatic control over the user’s browsing history, enabling you to create more dynamic and interactive web applications.

Example Navigating Browser History

<html>
<head>
    <title>History Object Example</title>
</head>
<body>
    <h2>History Object Example</h2>
    <button onclick="goBack()">Go Back</button>
    <button onclick="goForward()">Go Forward</button>
    <button onclick="goTwoStepsBack()">Go 2 Steps Back</button>
    <script>
        function goBack() {
            history.back(); 
        }
        function goForward() {
            history.forward(); 
        }
        function goTwoStepsBack() {
            history.go(-2); 
        }
       document.write("<p>Total history entries: " + history.length + "</p>");
    </script>
</body>
</html>

history.back() perform same as clicking the browser's Back button. history.forward() as clicking the browser's Forward button. history.go(-2), Moves two steps backward in the history stack. history.length shows how many entries are in the history for the current tab.

Output

Location Object in JavaScript

The location object represents the current URL of the browser window. It allows reading and updating parts of the URL or redirecting the user to a new page. It also provides information about the URL and allows you to manipulate it, such as navigating to a different URL or accessing specific components of the URL, like the hostname or pathname.

Properties and Methods of Location Object

Property	Description
location.href	Returns the entire URL of the current page.
location.protocol	Returns the protocol of the URL (e.g. “http” or “https”)
location.host	Returns the hostname and port number of the URL.
location.hostname	Returns the hostname of the URL.
location.port	Returns the port number of the URL
location.pathname	Return the path and filename of the URL.
location.search	Return the Query String of the URL.
location.hash	Returns the fragment identifier (hash) of the URL.
Methods	Description
location.assign(url)	Loads a new document specified by the provided URL.
location.replace(url)	Replaces the current document with a new one specified by the provided URL.
location.reload(forceReload)	Reloads the current document. If forceReload is true, it forces a reload from the server instead of using the browser cache.

<html>
<head>
    <title>Location Object Example</title>
</head>
<body>
    <h2>Location Object Example</h2>
    <p id="info"></p>
    <button onclick="reloadPage()">Reload Page</button>
    <button onclick="goToGoogle()">Go to Google</button>
    <button onclick="replacePage()">Replace with c-sharpcorner.com</button>
    <script>
        let info = `
            <strong>Current URL:</strong> ${location.href}<br>
            <strong>Protocol:</strong> ${location.protocol}<br>
            <strong>Host:</strong> ${location.host}<br>
            <strong>Pathname:</strong> ${location.pathname}<br>
            <strong>Query String:</strong> ${location.search}<br>
            <strong>Hash:</strong> ${location.hash}
        `;
        document.getElementById("info").innerHTML = info;
        function reloadPage() {
            location.reload();
        }
        function goToGoogle() {
            location.assign("https://www.google.com");
        }
        function replacePage() {
            location.replace("https://www.c-sharpcorner.com");
        }
    </script>
</body>
</html>

The JavaScript Location object provides several properties and methods to work with the current page’s URL and perform navigation tasks. The property location.href returns the full URL of the current page, while location.protocol gives the protocol used, such as http: or https:. The location.host property specifies the hostname along with the port number, and location.pathname returns the path after the domain name. To retrieve the query string part of a URL, you can use location.search, and location.hash provides the fragment identifier (e.g., #section1). For actions, the location.reload() method reloads the current page, location.assign(url) redirects the user to a new URL while keeping the current page in history, and location.replace(url) redirects to a new URL but does not keep the current page in the session history, meaning the user cannot go back using the back button. These features make the Location object essential for controlling navigation and handling URLs in web applications.

Output

Difference Between History and Location Objects

Feature	History Object	Location Object
Purpose	Manages browser history navigation.	Manages current URL and page redirection.
Key Method	back(), forward(), go()	assign(), replace(), reload()
Access URL	❌	✅ (through properties like href, pathname)

Summary

Both the history and location objects are essential for client-side navigation in JavaScript. While the history object helps control backward and forward navigation, the location object is used to manipulate the current URL and perform redirections. Understanding these objects can help developers create dynamic, user-friendly, and navigation-rich web applications.