Making Use of HTML5 History API for Manipulating Browser History

Web development is an area with lots of scope and possibilities. They create a huge difference in the way information is provided to you and also in the way it has been perceived by the user. The increasing usage of web based applications has also triggered the growth of JavaScript and the way it is used to dynamically load a plethora of content. Traditionally, web developers couldn’t do much about with the browser history especially when it comes to manipulating it and preserving an accurate information for the users benefit. Owing to the importance of more powerful pages, developers started demanding better control over them. Thankfully, we have HTML5, which provides webmasters a way to establish optimum control on the way browser history can be manipulated and tailored to fit the user needs.


In this tutorial, you’ll learn how to make use of HTML5 API so that you can efficiently manipulate the web history. I hope you all would find the tutorial relevant and bookmark it whenever you feel the need to create a system that helps you to move back and forth through the user’s history.

Traveling to the User History:

Using the history API developers can quickly and easily add, replace, and remove the history items, and also alter the way backward and forward buttons behave. Plus, it also becomes handy for them to extract state information and utilize the same to manipulate the document. You can do all this simply using the ‘history’  object, which is a property of  ‘window’

Moving Backward and Forward:

In the object ‘History’, you are getting two ways to travel around the user history.
One is ‘back()’  and the other one is ‘forward ()’ .
In order to move backward through history; just do:


This is exactly like the user clicking the back button in the browser toolbar.

Similarly, you can move forward like this:


Navigating to a Particular Point of History:

There is another method called ‘go()’ in the history object, which allows the user to move to a specific history point. Using this method, you can easily load any specific page from the session history, identified by its position as per the current page. For example, calling history.go(-2), the user will be moved back to two pages. Similarly, the user can be moved forward by simply passing history.go (2).

Additionally, one can also specify the total number of pages in the history stack by assessing the value of the length property. This can be done like this:

var numberOfEntries = window.history.length;

Manipulating The Session History:

Now as you have to navigate to the browser history, HTML5 provides you with two methods which allow you to add, remove, and modify the history related entries. The methods are:

1) history.pushState() and

2) history.replaceState() method;

We will gain an in-depth understanding about both of the methods in detail in the next section.

Using pushState():

The pushState method is basically used to generate a new history entry. There are three parameters which you should understand to know completely about the pushState method. They are described as follows:

  • stateObj- the state object is a JavaScript object which is helpful in storing all the data that is related with the latest history entry created by the pushState. This basically includes the URL of the page which has been loaded through Ajax or even the page content.
  • Title– It’s a parameter which acts as a way to describe the state to which you are moving.
  • URL– It’s an optional parameter, and is related with the history entry. Remember, browser won’t attempt to load this URL when a pushState is being called. However, the URL can be loaded later as and when the user restarts the browser. The URL can be either absolute or relative, however, it should be of the same origin as the current URL. Otherwise an exception will be thrown by the pushState.

Now, let’s understand the concept better by through the following example:

This is how the HTML content of index.html can be shown:

<!DOCTYPE html>
 <meta charset="UTF-8">
 <title>Making Use of HTML5 API for Manipulating Browser History</title>
 <script src=""></script>
 <li><a href="page1.html">Page1</a></li>
 <li><a href="page2.html">Page2</a></li>
 <li><a href="page3.html">Page3</a></li>
 <li><a href="page4.html">Page4</a></li>
 <h1 id="page-title"></h1>
 <div id="page-content"></div>
<p style="text-align: justify;">

Now, insert the following JavaScript code to the same document.

var pages = {
 page1: {
 title: "Page 1",
 content: "Content is here of Page 1"
 page2: {
 title: "Page 2",
 content: "Content is here of Page 2"
 page3: {
 title: "Page 3",
 content: "Content is here of Page 3"
 page4: {
 title: "Page 4",
 content: "Content is here of Page 4"

 // Function for update the content.
 function updateStateContent(obj) {
 if (obj) {
 document.title = obj.title;

 $('nav a').on('click', function() {

var URL = $(this).attr('href');
 var data = pages[URL.split('.')[0]];

// Update the page title and page content.

 // Create a new history item.
 history.pushState(data, data.title, URL);
 return false;

window.onpopstate = function(event){
<p style="text-align: justify;">

When you proceed to load http://localhost/index.html and click on the any link, the history entries will be generated for each page as the user clicks on them while enabling the browser display the URL of the page the user is currently in. Also, there will be changes in the content as well. For example: when you click on page2 link, then page2 store in history state and browser display the URL(page2.html) and page title and content change accordingly. The page will also be getting a popstate event ( a popstate event is triggered when the user navigates through their history, either backward or forward, provided it keeps the user on the current page), which is attached with the state event via the Object property. It will contain the copy of the history entry’s state object.

Now, pressing the back button again, the URL will be changed to something like this:
http://localhost/page1.html and another popstate even will be forwarded to the page.2html.

Understanding replaceState ()

history.replaceState functions exactly like the history.pushState except that instead of creating the new history, replaceState only alters the current history.
The function is useful when it comes to updating or adding some relevant data to the state object or URL of the current page after calling the pushState.
// Updates the current history entry.
window.history.replaceState(stateObj, title, URL);

Point to be noted: both pushState and replaceState methods do not allow an hashtag event to be fired.


I Hope you have well understood the process of making use of HTML5 API to extend the JavaScript API and manipulate the web history. This way you can better enhance your presentation and make the information more useful.

About sarah-parker

Being a well known blogger from Designs2HTML Ltd., Sarah Parker gives valuable and best tips on context of HTML to Wordpress theme conversion and design technique. Also, she is enthusiast of sharing her innovative ideas related to web design technologies.

Related posts:

One thought on “Making Use of HTML5 History API for Manipulating Browser History

Leave a Reply

Your email address will not be published. Required fields are marked *