Search within TutorialsPark

Javascript BOM : history Object


To navigate forward and backward through the user's browsing history


Javascript BOM : history Object

The Javascript BOM history object is a property of the window object. It is used to maintain a record (using a stack) of the pages visited

The history object is used to navigate back or forward on a webpage.Similar to back and forward buttons on Browser's toolbar.

The history object can reference only those pages that the user has visited and record of which is available within the browser stack.

The length property of the history object specifies the number of items in the stack, but for security reasons scripts cannot access these URLs (as any script could access your browsing history)

There are three other methods to navigate to other pages based on list of URL's available in the browser stack. These methods are back() , forward() and go() .

Table : Properties and Methods of history Object

Name Description Returns
back() To go one step back in the history void
forward() To go one step forward in the history void
go(<index>) To go the specified position in the history relative to the current document void
length To return the items in the browser history number.
pushState(<state>, <title>, <url>) To Push(add) an entry in a stack with the browser history void
replace(<state>, <title>, <url>) To replace the current entry in the browser history void
state It returns state data associated with the current document in the browser's history object

Javascript history Object: Navigating within browsing history

To history object methods back() , forward() and go() are used to tell the browser to naviagte to specified URL in history.

The methods back() and forward() have the same effect as the browser's back and forward button.

The method go() is used to navigate to a URL in history relative to the current document.A positive value is used to move forward in the history while a negative value is used to move backwards.

Eg: the value "-2 " will move to a location two steps backward relative to current location, and value " 2 " moves two steps forward relative to current location.

Syntax: Javascript history Object: Navigating within browsing history

Example: Javascript history Object: Navigating within browsing history

Give it a TRY! » Note: Browser's history is stored in a stack.A Stack is a first-in first-out Data Structure


Javascript History Object: Inserting an Entry into browser History

The Javascript History.push method is used to add(i.e push) URL into browser history stack, under some constraints as follows:

1. The URL address must be from the same server name and port as the current document.

2. One way to add URLs is to make use of query string or hash fragment appended to the current document.

Example : Javascript Location object to navigate to external Pages

Give it a TRY! » Note: The query string is added to the current URL.


Javascript History Object : To Store Complex Data in Browser History

In the below demo, we have stored complex data in the browser history using pushstate() method.

Syntax: Javascript history Object using pushState Method

Give it a TRY! » Note: These system dialogs can be used to display information and ask for inputs from user.