To navigate forward and backward through the user's browsing history
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
|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|
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.
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.
In the below demo, we have stored complex data in the browser history using pushstate() method.