Manipulating the browser history | The pushState() method | The replaceState() method

The DOM ( Document Object Model ) window object provides access to the browser's history through the history object. It exposes useful methods and properties that let you move back and forth through the user's history,

Moving forward and backward in browser history

for, move backward through history.
window.history.back();
it work exactly like the user clicked on the Back button in browser toolbar.

Same for, move forward through history..
window.history.forward();
it work exactly like the user clicked on the Back button in browser toolbar.

Moving to a specific point in browser history

It's also possible to moving forward and backward with number of step ( page ) in browser history just using go() function with number of page as its parameter value.

for, moving 2 step back in browser history. just write
window.history.go(-2);

and for 2 step forward similarly,
window.history.go(2);

Adding and modifying history entries

history.pushState() and history.replaceState() methods of HTML5 allow us to add and modify history entries, respectively. These methods work in conjunction with the window.onpopstate event.

The pushState() method

pushState() takes three parameters:

• state object — The state object is a JavaScript object which is associated with the new history entry created by pushState(). Whenever the user navigates to the new state, a popstate event is fired, and the state property of the event contains a copy of the history entry's state object.
• title — Firefox currently ignores this parameter, although it may use it in the future. Passing the empty string here should be safe against future changes to the method. Alternatively, you could pass a short title for the state to which you're moving.
• URL — The new history entry's URL is given by this parameter. Note that the browser won't attempt to load this URL after a call to pushState(), but it might attempt to load the URL later, for instance after the user restarts her browser. The new URL does not need to be absolute; if it's relative, it's resolved relative to the current URL. The new URL must be of the same origin as the current URL; otherwise, pushState() will throw an exception. This parameter is optional; if it isn't specified, it's set to the document's current URL.

Example : http://vijaylathiya.blogspot.com/test.html executes the following JavaScript.

 var stateObj = { foo: "another" };
 history.pushState(stateObj, "page title", "another.html");


        after executing script the URL bar display http://vijaylathiya.blogspot.com/another.html, but won't cause the browser to load another.html or even check that another.html page exists or not it just rewrite url and display test.html page content.

also,it work same as above script.
window.history.pushState("", "title of page", another.html);

The replaceState() method

replaceState() work exactly same as pushState() except that replaceState() modifies the current history entry instead of creating a new one.

replaceState() is particularly useful when you want to update the state object or URL of the current history entry in response to some user action.