JavaScript Lesson: History and Location Objects
1. Introduction to BOM
The Browser Object Model (BOM) allows JavaScript to interact with the
browser beyond just the document (DOM).
Two key objects in BOM:
history → handles the browser’s navigation history.
location → handles the current URL and allows redirection.
Both are properties of the window object:
[Link]
[Link]
The history Object
The history object gives access to the browser’s session history (the list of
pages visited in the current tab).
Common Properties
[Link] → number of entries in the session history.
[Link]([Link]); // e.g., 5
Methods of history
1. back() → goes back one step in history.
2. [Link](); // same as browser back button
3. forward() → goes forward one step.
4. [Link]();
5. go(n) → loads a specific page relative to the current one.
o n = -1 → previous page
o n = 1 → next page
6. [Link](-1); // back one page
7. [Link](2); // forward two pages
8. pushState(stateObj, title, url) → (HTML5) adds a new entry in history.
9. [Link]({ page: 1 }, "title 1", "?page=1");
[Link](stateObj, title, url) → replaces current entry.
[Link]({ page: 2 }, "title 2", "?page=2");
Note: pushState and replaceState do not reload the page. Useful for Single
Page Applications (SPA).
Example: Simple History Navigation
<!DOCTYPE html>
<html>
<body>
<button onclick="[Link]()">Go Back</button>
<button onclick="[Link]()">Go Forward</button>
<button onclick="[Link](-2)">Go Back 2 Pages</button>
</body>
</html>
3. The location Object
The location object represents the current URL of the browser and allows you
to change it.
Common Properties
[Link] → full URL.
[Link] → protocol (http: or https:).
[Link] → domain name + port.
[Link] → domain name only.
[Link] → port number.
[Link] → path after the domain.
[Link] → query string (?id=10).
[Link] → fragment identifier (#section1).
[Link] → origin (protocol + host).
Example:
[Link]([Link]); // [Link]
id=10#top
[Link]([Link]); // https:
[Link]([Link]); // [Link]
[Link]([Link]); // 8080
[Link]([Link]); // /[Link]
[Link]([Link]); // ?id=10
[Link]([Link]); // #top
Methods of location
1. [Link](url) → loads a new document (like setting href).
2. [Link]("[Link]
3. [Link](url) → loads a new page, but does not save the current
page in history.
4. [Link]("[Link]
5. [Link]() → reloads the current page.
6. [Link](); // reloads page
7. [Link](true); // reloads from server (not cache)
Example: Location Properties
<!DOCTYPE html>
<html>
<body>
<h2>Location Object Example</h2>
<button onclick="showLocation()">Show Location Info</button>
<p id="info"></p>
<script>
function showLocation() {
let text = `
Href: ${[Link]} <br>
Protocol: ${[Link]} <br>
Host: ${[Link]} <br>
Hostname: ${[Link]} <br>
Port: ${[Link]} <br>
Pathname: ${[Link]} <br>
Search: ${[Link]} <br>
Hash: ${[Link]} <br>
Origin: ${[Link]}
`;
[Link]("info").innerHTML = text;
}
</script>
</body>
</html>
4. Real-World Use Cases
Redirect User After Login
if (!userLoggedIn) {
[Link]("/[Link]");
}
Reload Page After Form Submit
[Link]("refreshBtn").onclick = function() {
[Link]();
};
Single Page Applications (SPA) Navigation
[Link]({}, "", "/dashboard");
Analytics & Tracking
[Link] can be used to measure session depth.
[Link] helps parse query strings for tracking IDs.
5. Limitations & Security
Users can manually edit the URL (so don’t rely on [Link] for
secure data).
Some history manipulations may be restricted to prevent phishing.
pushState and replaceState must be used carefully to avoid confusing
the user.
Summary
history object → navigation (back, forward, go, pushState, replaceState).
location object → URL manipulation and redirection.
Both are powerful in navigation control, SPA development, and
analytics.