-
Hajipur, Bihar, 844101
Hajipur, Bihar, 844101
JS Basics
JS Variables & Operators
JS Data Types & Conversion
JS Numbers & Math
JS Strings
JS Dates
JS Arrays
JS Control Flow
JS Loops & Iteration
JS Functions
JS Functions
Function Definitions
Function Parameters
Function Invocation
Function Call
Function Apply
Function Bind
Function Closures
JS Arrow Function
JS Objects
JS Objects
JS Object Properties
JS Object Methods
JS Object Display
JS Object Constructors
Object Definitions
Object Get / Set
Object Prototypes
Object Protection
JS Classes & Modules
JS Async Programming
JS Advanced
JS Destructuring
JS Bitwise
JS RegExp
JS Precedence
JS Errors
JS Scope
JS Hoisting
JS Strict Mode
JS this Keyword
JS HTML DOM
DOM Intro
DOM Methods
DOM Document
DOM Elements
DOM HTML
DOM Forms
DOM CSS
DOM Animations
DOM Events
DOM Event Listener
DOM Navigation
DOM Nodes
DOM Collections
DOM Node Lists
JS BOM (Browser Object Model)
JS Web APIs
Web API Intro
Web Validation API
Web History API
Web Storage API
Web Worker API
Web Fetch API
Web Geolocation API
JS AJAX
AJAX Intro
AJAX XMLHttp
AJAX Request
AJAX Response
AJAX XML File
AJAX PHP
AJAX ASP
AJAX Database
AJAX Applications
AJAX Examples
JS JSON
JSON Intro
JSON Syntax
JSON vs XML
JSON Data Types
JSON Parse
JSON Stringify
JSON Objects
JSON Arrays
JSON Server
JSON PHP
JSON HTML
JSON JSONP
JS Graphics & Charts
The Web History API is a browser feature that allows you to manipulate the session history of a web page using JavaScript. With it, you can navigate between pages, change URLs, and manage browser states without forcing a page reload.
It’s widely used in single-page applications (SPAs) and modern web apps to create smooth navigation experiences.
The History API is part of the Browser Object Model (BOM). It gives you access to:
The pages the user has visited in the current browser tab.
Methods to move forward or backward in history.
Methods to modify the URL or state without reloading the page.
It works via the window.history
object.
window.history
provides several useful properties:
Property | Description |
---|---|
length |
Returns the number of pages in the session history. |
state |
Returns the current state object associated with the history entry. |
Example: Checking History Length
console.log("Number of pages in history:", window.history.length);
Explanation:
history.length
counts how many pages the browser has stored in the session for this tab.
The History API mainly uses three methods:
Method | Description |
---|---|
back() |
Goes back one page in history (similar to browser back button). |
forward() |
Goes forward one page in history (similar to browser forward button). |
go(n) |
Moves forward or backward n steps in history. n can be negative or positive. |
document.getElementById("backBtn").addEventListener("click", function() {
history.back(); // Goes to previous page
});
document.getElementById("forwardBtn").addEventListener("click", function() {
history.forward(); // Goes to next page
});
HTML Buttons:
<button id="backBtn">Go Back</button>
<button id="forwardBtn">Go Forward</button>
Explanation:
history.back()
moves back one page in the browser history.
history.forward()
moves forward one page.
// Move 2 pages back
history.go(-2);
// Move 1 page forward
history.go(1);
Explanation:
go(-n)
moves back n steps.
go(n)
moves forward n steps.
go(0)
reloads the current page.
The most powerful part of the History API is state management. You can change the URL without reloading the page using:
pushState(stateObj, title, url)
– adds a new history entry.
replaceState(stateObj, title, url)
– modifies the current history entry.
// Add a new state to history
const state = { page: 1 };
history.pushState(state, "Page 1", "?page=1");
console.log("Current URL:", window.location.href);
Explanation:
state
is an object storing custom data.
"Page 1"
is the title (currently not used by most browsers).
"?page=1"
changes the URL without reloading.
// Replace the current state
const state = { page: 2 };
history.replaceState(state, "Page 2", "?page=2");
console.log("Current URL after replace:", window.location.href);
Explanation:
replaceState()
modifies the current history entry instead of creating a new one.
Useful for updating the URL without adding new entries.
When a user clicks the back or forward button, a popstate
event is fired. You can listen to it to update page content dynamically.
window.addEventListener("popstate", function(event) {
if(event.state) {
console.log("Page state changed:", event.state);
} else {
console.log("No state associated with this entry.");
}
});
Explanation:
event.state
contains the state object passed in pushState
or replaceState
.
This allows SPAs to load content without full page reloads when navigating.
<button onclick="loadPage(1)">Page 1</button>
<button onclick="loadPage(2)">Page 2</button>
<div id="content">Welcome!</div>
<script>
function loadPage(page) {
const content = document.getElementById("content");
// Update content dynamically
content.textContent = "You are on Page " + page;
// Add new history entry
history.pushState({ page: page }, "Page " + page, "?page=" + page);
}
// Handle back/forward navigation
window.addEventListener("popstate", function(event) {
const content = document.getElementById("content");
if(event.state && event.state.page) {
content.textContent = "You are on Page " + event.state.page;
} else {
content.textContent = "Welcome!";
}
});
</script>
Explanation:
Clicking a button updates the content without reloading.
The URL is updated using pushState
.
Browser back and forward buttons update the content dynamically via popstate
.
Smooth navigation – no page reloads, better user experience.
Dynamic URLs – reflect current state in the URL.
State management – save page-specific data in the history.
Works well with SPAs – single-page applications rely heavily on this API.
SEO-friendly URLs – URLs can be updated without reloads, which helps in bookmarking and sharing.
Always use state objects to store data for each entry.
Use replaceState()
if you want to update URL without creating history entries.
Listen to popstate
to handle user navigation.
Avoid overcomplicating URL changes; keep URLs meaningful.
Test across browsers — most modern browsers support the History API, but older browsers may not.
The Web History API is a powerful feature in JavaScript that allows:
Navigation through browser history (back()
, forward()
, go()
)
Managing the URL and state without reloading (pushState()
, replaceState()
)
Handling user navigation dynamically (popstate
event)
It is essential for building modern web applications, especially single-page applications (SPAs), where smooth navigation and dynamic content are required.
Write JavaScript code to move back one page in browser history when a button is clicked.
Create a button that moves forward one page in browser history using the History API.
Use the go()
method to navigate two steps back in the session history when a button is pressed.
Write code that pushes a new URL ?page=home
to the browser history without reloading the page.
Use replaceState()
to update the current URL to ?page=profile
without adding a new history entry.
Create a single-page navigation system where clicking buttons changes the content and updates the URL using pushState()
.
Write JavaScript that listens to the popstate
event and displays the current page number in a <div>
when the user clicks back or forward.
Implement a page counter using the History API that updates the URL query parameter each time a user navigates to a different section.
Write code that checks the current history length and logs it to the console.
Combine pushState()
and popstate
to create a dynamic tab navigation system where each tab click updates the URL and browser back/forward buttons update the content accordingly.
JS Basics
JS Variables & Operators
JS Data Types & Conversion
JS Numbers & Math
JS Strings
JS Dates
JS Arrays
JS Control Flow
JS Loops & Iteration
JS Functions
JS Functions
Function Definitions
Function Parameters
Function Invocation
Function Call
Function Apply
Function Bind
Function Closures
JS Arrow Function
JS Objects
JS Objects
JS Object Properties
JS Object Methods
JS Object Display
JS Object Constructors
Object Definitions
Object Get / Set
Object Prototypes
Object Protection
JS Classes & Modules
JS Async Programming
JS Advanced
JS Destructuring
JS Bitwise
JS RegExp
JS Precedence
JS Errors
JS Scope
JS Hoisting
JS Strict Mode
JS this Keyword
JS HTML DOM
DOM Intro
DOM Methods
DOM Document
DOM Elements
DOM HTML
DOM Forms
DOM CSS
DOM Animations
DOM Events
DOM Event Listener
DOM Navigation
DOM Nodes
DOM Collections
DOM Node Lists
JS BOM (Browser Object Model)
JS Web APIs
Web API Intro
Web Validation API
Web History API
Web Storage API
Web Worker API
Web Fetch API
Web Geolocation API
JS AJAX
AJAX Intro
AJAX XMLHttp
AJAX Request
AJAX Response
AJAX XML File
AJAX PHP
AJAX ASP
AJAX Database
AJAX Applications
AJAX Examples
JS JSON
JSON Intro
JSON Syntax
JSON vs XML
JSON Data Types
JSON Parse
JSON Stringify
JSON Objects
JSON Arrays
JSON Server
JSON PHP
JSON HTML
JSON JSONP
JS Graphics & Charts