Building Your Learning Module...
Getting things ready for you!
Find videos you like?
Save to resource drawer for future reference!
The History API lets you control the browser's history - go back, forward, or change the URL without reloading the page. Perfect for building Single Page Applications (SPAs) like Gmail or Twitter where pages change but don't reload.
Go back one page (like clicking browser back button)
history.back(); // Same as clicking ← buttonGo forward one page (like clicking browser forward button)
history.forward(); // Same as clicking → buttonJump multiple pages at once (negative = back, positive = forward)
history.go(-2); // Go back 2 pageshistory.go(1); // Go forward 1 pagehistory.go(0); // Reload current pageAdd new page to history WITHOUT reloading (most important for SPAs!)
history.pushState(data, title, url);Change current page in history WITHOUT reloading (doesn't add to history)
history.replaceState(data, title, url);Try navigating between pages without reload!
<div style="max-width: 600px; margin: 0 auto; font-family: sans-serif;">
<h2 style="color: #2563eb; margin-bottom: 20px;">🌐 My Single Page App</h2>
<!-- Navigation -->
<nav style="background: #f1f5f9; padding: 15px; border-radius: 8px; margin-bottom: 20px;">
<button id="homeBtn" style="padding: 10px 20px; margin-right: 10px; background: #3b82f6; color: white; border: none; border-radius: 6px; cursor: pointer; font-weight: 600;">
🏠 Home
</button>
<button id="aboutBtn" style="padding: 10px 20px; margin-right: 10px; background: #3b82f6; color: white; border: none; border-radius: 6px; cursor: pointer; font-weight: 600;">
ℹ️ About
</button>
<button id="contactBtn" style="padding: 10px 20px; background: #3b82f6; color: white; border: none; border-radius: 6px; cursor: pointer; font-weight: 600;">
📧 Contact
</button>
</nav>
<!-- Page Content -->
<div id="content" style="background: white; padding: 30px; border-radius: 8px; border: 2px solid #e2e8f0; min-height: 200px;">
<h1 style="color: #10b981; margin-bottom: 15px;">🏠 Home Page</h1>
<p style="color: #64748b; line-height: 1.6;">Welcome to our single page application! Click the navigation buttons above to switch pages without reload.</p>
<p style="color: #64748b; margin-top: 10px;">Notice: The URL changes but the page doesn't reload! ✨</p>
</div>
<!-- Browser Controls Simulation -->
<div style="margin-top: 20px; padding: 15px; background: #fef3c7; border-radius: 8px;">
<p style="margin: 0 0 10px 0; font-weight: 600; color: #92400e;">Browser Navigation:</p>
<button id="backBtn" style="padding: 8px 16px; margin-right: 10px; background: #f59e0b; color: white; border: none; border-radius: 6px; cursor: pointer;">
← Back
</button>
<button id="forwardBtn" style="padding: 8px 16px; background: #f59e0b; color: white; border: none; border-radius: 6px; cursor: pointer;">
Forward →
</button>
</div>
<!-- URL Display -->
<div id="urlDisplay" style="margin-top: 15px; padding: 10px; background: #dbeafe; border-radius: 6px; font-family: monospace; color: #1e40af; font-size: 14px;">
Current URL: /home
</div>
</div>Loading preview...
// HTML buttons
<button id="backBtn">← Go Back</button>
<button id="forwardBtn">Go Forward →</button>
<button id="refreshBtn">Refresh Page</button>
// JavaScript
document.getElementById('backBtn').addEventListener('click', () => {
history.back(); // Go to previous page
});
document.getElementById('forwardBtn').addEventListener('click', () => {
history.forward(); // Go to next page
});
document.getElementById('refreshBtn').addEventListener('click', () => {
history.go(0); // Reload current page
});
// 🎯 These work exactly like browser buttons!// Change URL without page reload!
// Current URL: https://example.com/
// Add new page to history
history.pushState(
{ page: 'about' }, // State object (any data you want)
'About Page', // Title (usually ignored by browsers)
'/about' // New URL
);
// URL is now: https://example.com/about
// But page didn't reload! 🎉
console.log(history.state); // { page: 'about' }
// You can now update the page content with JavaScript
document.getElementById('content').innerHTML = '<h1>About Page</h1>';
// Handle back/forward buttons
window.addEventListener('popstate', (event) => {
if (event.state && event.state.page) {
// Update content when user clicks back/forward
const page = event.state.page;
document.getElementById('content').innerHTML = '<h1>' + page + '</h1>';
}
});
// 🎯 This is how SPAs work - change URL and content without reload!Scroll up to the interactive demo to see a working Single Page App with navigation, back/forward buttons, and URL updates - all without page reloads!
Change pages without reload (like Gmail, Twitter)
Update URL when switching tabs
Update URL with search params without reload
Show page number in URL
Close modal with back button
Bookmark specific dashboard states
Listen for back/forward button clicks with window.addEventListener('popstate')
When navigating to a new section that should be in history
When changing filters, sorts, or other temporary states
Store data in state object to restore page when user navigates back
History API only works for same-origin URLs (your own site)
history.back(); // Go back one page
history.forward(); // Go forward one page
history.go(-2); // Go back 2 pages// Add to history
history.pushState({ page: 'about' }, '', '/about');
// Replace current entry
history.replaceState({ filter: 'new' }, '', '/products?filter=new');window.addEventListener('popstate', (event) => {
console.log('State:', event.state);
// Update page based on state
});🎯 pushState: New entry | 🔄 replaceState: Update current
back(), forward(), go()
Control browser navigation
Add to history
Change URL without reload
Update without adding
For filters, tabs, etc.
Listen for back/forward
Update page content