The next useful property that we intend to discuss is the history property of the window object and this property is an object itself. The window.history contains a repository of recently visited web-pages and it provides methods to list these pages or to navigate them.
The window.history object has several properties of its own like length, back, forward, go, etc. Certain browsers (Firefox, for example) might also define additional properties. The length property contains the number of pages stored in the history. So, if we open a new window and load this page, then the value of length would be 1.
Methods back() and forward() allow us to go one page earlier or ahead in the window.history list. If we have to go more than one page, then we can use the go() method. Specifying go(2) means we need to go to two pages from the current page or go(-2) means we need to go to two pages visited earlier than the current page.
Here is a simple example that prints properties of the window.history object. Next, it also demonstrate a sample usage of one of the history's methods: history.back. For this, it sets a timer for 3 seconds and once the 3 seconds expire, it uses history.back() to go to the earlier page.
<!doctype html>
<html>
<div id="div_id"> </div>
<script type="text/javascript">
var elem = document.getElementById('div_id');
// First, print properties of the window.history object.
for (item in window.history) {
elem.innerHTML += item + ", ";
}
// Next, go to the earlier page
window.setTimeout("history.back()", 3000);
</script>
</html>
The output of this page with Firefox 10 is: "0, 1, 2, 3, length, current, previous, next, back, forward, go, item, pushState, replaceState, state,". The first 4 properties (0,1,2,3) reflect the total number of pages for the history. Thus, if we were to print the window.history.length, then the value would be 4.
With newer browsers, we can also see window.history having methods like pushState() and replaceState(); these two methods are introduced with HTML5. These method allow us to modify the window.history list which can be useful for Ajax-based applications. With Ajax, a page can reload without undergoing any change in the browser URL. With Ajax, one can load the page in an asynchronous manner in a such a manner that the state of the page can change while the URL in the browser remains the same. For such cases, back(), forward(), and go() methods of history object may not be able to reflect the correct URL.
For these scenarios, we can use pushState() and replaceState() methods. The pushState() method allows us to add a new page to the URL of the current page (let us say address1.html); it does not check if the new page added is valid or not! Next, when we go to a new page and after that hit the browser's back button, then we will go to address1.html page instead of the earlier one. With replaceState() method, we can actually replace the URL of the current entry in the history. Together, these two methods allow us to circumvent the limitation posed by Ajax applications.
For security reasons, these new methods work only if the calling script is of the same domain origin as the addresses being updated in the history (http://www.w3.org/TR/html5/). Without this, third party (having different domain origin) malicious code could potentially alter the history entry leading to security risks.