History API - Web APIs | MDN
Skip to main content
Skip to search
MDN
HTML
HTML: Markup language
HTML reference
Elements
Global attributes
Attributes
See all…
HTML guides
Responsive images
HTML cheatsheet
Date & time formats
See all…
Markup languages
SVG
MathML
XML
CSS
CSS: Styling language
CSS reference
Properties
Selectors
At-rules
Values
See all…
CSS guides
Box model
Animations
Flexbox
Colors
See all…
Layout cookbook
Column layouts
Centering an element
Card component
See all…
JavaScriptJS
JavaScript: Scripting language
JS reference
Standard built-in objects
Expressions & operators
Statements & declarations
Functions
See all…
JS guides
Control flow & error handing
Loops and iteration
Working with objects
Using classes
See all…
Web APIs
Web APIs: Programming interfaces
Web API reference
File system API
Fetch API
Geolocation API
HTML DOM API
Push API
Service worker API
See all…
Web API guides
Using the Web animation API
Using the Fetch API
Working with the History API
Using the Web speech API
Using web workers
All
All web technology
Technologies
Accessibility
HTTP
URI
Web extensions
WebAssembly
WebDriver
See all…
Topics
Media
Performance
Privacy
Security
Progressive web apps
Learn
Learn web development
Frontend developer course
Getting started modules
Core modules
MDN Curriculum
Check out the video course from Scrimba, our partner
Learn HTML
Structuring content with HTML module
Learn CSS
CSS styling basics module
CSS layout module
Learn JavaScript
Dynamic scripting with JavaScript module
Tools
Discover our tools
Playground
HTTP Observatory
Border-image generator
Border-radius generator
Box-shadow generator
Color format converter
Color mixer
Shape generator
About
Get to know MDN better
About MDN
Advertise with us
Community
MDN on GitHub
Blog
Toggle sidebar
Web
Web APIs
History API
Theme
OS default
Light
Dark
English (US)
Remember language
Learn more
Deutsch
English (US)
Español
Français
日本語
한국어
Português (do Brasil)
Русский
中文 (简体)
正體中文 (繁體)
History API
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
Learn more
See full compatibility
The History API provides access to the browser's session history (not to be confused with WebExtensions history) through the history global object. It exposes useful methods and properties that let you navigate back and forth through the user's history, and manipulate the contents of the history stack.
Note:
This API is only available on the main thread (Window). It cannot be accessed in Worker or Worklet contexts.
In this article
Concepts and usage
Interfaces
Examples
Specifications
Browser compatibility
See also
Concepts and usage
Moving backward and forward through the user's history is done using the back(), forward(), and go() methods.
Moving forward and backward
To move backward through history:
js
history.back();
This acts exactly as if the user clicked on the Back button in their browser toolbar.
Similarly, you can move forward (as if the user clicked the Forward button), like this:
js
history.forward();
Moving to a specific point in history
You can use the go() method to load a specific page from session history, identified by its relative position to the current page. (The current page's relative position is 0.)
To move back one page (the equivalent of calling back()):
js
history.go(-1);
To move forward a page, just like calling forward():
js
history.go(1);
Similarly, you can move forward 2 pages by passing 2, and so forth.
Another use for the go() method is to refresh the current page by either passing 0, or by invoking it without an argument:
js
// The following statements
// both have the effect of
// refreshing the page
history.go(0);
history.go();
You can determine the number of pages in the history stack by looking at the value of the length property:
js
const numberOfEntries = history.length;
Interfaces
History
Allows manipulation of the browser session history (that is, the pages visited in the tab or frame that the current page is loaded in).
PopStateEvent
The interface of the popstate event.
Examples
The following example assigns a listener for the popstate event. It then illustrates some of the methods of the history object to add, replace, and move within the browser history for the current tab.
js
window.addEventListener("popstate", (event) => {
alert(
`location: ${document.location}, state: ${JSON.stringify(event.state)}`,
);
});
history.pushState({ page: 1 }, "title 1", "?page=1");
history.pushState({ page: 2 }, "title 2", "?page=2");
history.replaceState({ page: 3 }, "title 3", "?page=3");
history.back(); // alerts "location: http://example.com/example.html?page=1, state: {"page":1}"
history.back(); // alerts "location: http://example.com/example.html, state: null"
history.go(2); // alerts "location: http://example.com/example.html?page=3, state: {"page":3}"
Specifications
Specification
HTML
# the-history-interface
Browser compatibility
Enable JavaScript to view this browser compatibility table.
See also
history global object
popstate event
Help improve MDN
Was this page helpful to you?
Yes
No
Learn how to contribute
This page was last modified on Jul 26, 2024 by MDN contributors.
View this page on GitHub • Report a problem with this content
Filter sidebar
Clear filter input
History API
Guides
Working with the History API
Interfaces
History
PopStateEvent
Properties
Window.history
Events
Window: popstate
MDN
Your blueprint for a better internet.
MDN
About
Blog
Mozilla careers
Advertise with us
MDN Plus
Product help
Contribute
MDN Community
Community resources
Writing guidelines
MDN Discord
MDN on GitHub
Developers
Web technologies
Learn web development
Guides
Tutorials
Glossary
Hacks blog
Mozilla
Website Privacy Notice
Telemetry Settings
Legal
Community Participation Guidelines
Portions of this content are ©1998–2026 by individual mozilla.org contributors. Content available under a Creative Commons license.