Building Your Learning Module...
Getting things ready for you!
Find videos you like?
Save to resource drawer for future reference!
The History API allows you to manipulate the browser history, enabling single-page applications (SPAs) to update the URL without triggering a full page reload.
Go back/forward through history
Add new entries to history
Update URL without page reload
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>History API Demo</title>
</head>
<body>
<div class="container">
<h1>🕐 History API Demo</h1>
<p class="subtitle">Navigate through pages using pushState and popstate events</p>
<div class="nav-buttons">
<button class="btn-back" onclick="goBack()">⬅️ Back</button>
<button class="btn-forward" onclick="goForward()">Forward ➡️</button>
</div>
<div class="pages">
<button class="page-btn" onclick="navigateTo('home')">🏠 Home</button>
<button class="page-btn" onclick="navigateTo('about')">📖 About</button>
<button class="page-btn" onclick="navigateTo('contact')">📧 Contact</button>
</div>
<div class="current-state">
<div class="state-title">Current Page</div>
<div class="state-value" id="currentPage">Loading...</div>
</div>
<div class="history-info">
<strong>💡 Try this:</strong><br>
Click different pages, then use Back/Forward buttons. Notice how the URL changes without page reload!
</div>
</div>
</body>
</html>Loading preview...
history.pushState(state, title, url)Add a new entry to history
history.replaceState(state, title, url)Modify current history entry
history.back()Go to previous page
history.forward()Go to next page
history.go(n)Go n pages forward/back
window.onpopstateListen for back/forward events
popstate events to handle back/forward navigationreplaceState for initial page load to set proper state