The history object

- The history object is part of the window object, and contains the URLs visited by the user (within a browser window).
It contains useful methods and properties that let you move back and forth through the user's history, and manipulate the contents of the history stack.
- Syntax:

window.history.property_name
window.history.methodName()

• The history object has two properties: length and state.
window.history.length - returns the number of URLs in the history list.
window.history.state - returns the object added in history with pushState() or replaceState().

Methods of the history object

back() - loads the previous URL in the history list.
<button onClick='window.history.back()'>Back</button>
forward() - loads the next URL in the history list.
<button onClick='window.history.forward()'>Forward</button>

go(x) - Loads a specific URL from the history list (x can be a negative or positive index number).

window.history.go(-1); //equivalent of calling: window.history.back()
window.history.go(-2); //back two pages
window.history.go(1); //equivalent of calling: window.history.forward()

pushState(state_obj, title, url) - pushes the given data onto the session history stack with the specified title and, if provided, URL.
Additionally, it modifies the address in the address bar with the specified 'url' without loading that address (it does not matter if it's /or not a valid address).
- 'state_obj' is a JavaScript object which is associated with the new history entry, and it can be accessed with: history.state.
```
<button onClick='addAdr()'>Add address</button>
<script>
var stob ={prop:'some str'};
function addAdr(){
 window.history.pushState(stob, 'New Title', 'some_url.html');

 //uses the state property to show the value of prop added in history
 alert(history.state.prop);
}
</script>
```
- Demo:
- Click the following button, see the change in the browser address.
replaceState(state_obj, title, url) - updates the most recent entry on the history stack to have the specified data, title, and, if provided, URL.
Similar with pushState(), it modifies the address in the address bar with the specified 'url' without loading that address (it does not matter if it's /or not a valid address).
- 'state_obj' is a JavaScript object which is associated with the new history entry, and it can be accessed with: history.state.
```
<button onClick='replaceAdr()'>Modify the address</button>
<script>
var stob ={prop:'some str'};
function replaceAdr(){
 window.history.replaceState(stob, 'New Title', 'change_url.html');

 //uses the state property to show the value of prop added in history
 alert(history.state.prop);
}
</script>
```
- Demo:
- Click the following button, see the change in the browser address.

<<-navigator object -- The location object->>

Daily Test with Code Example

HTML

CSS

JavaScript

PHP-MySQL

Which tag is used to add lists into <ul> and <ol> elements?

<ul>
 <li>http://coursesweb.net/html/</li>
 <li>http://coursesweb.net/css/</li>
</ul>

Which value of the "display" property creates a block box for the content and ads a bullet marker?

block list-item inline-block

.some_class {
  display: list-item;
}

Which instruction converts a JavaScript object into a JSON string.

JSON.parse() JSON.stringify eval()

var obj = {
 "courses": ["php", "javascript", "ajax"]
};
var jsonstr = JSON.stringify(obj);
alert(jsonstr);    // {"courses":["php","javascript","ajax"]}

Indicate the PHP class used to work with HTML and XML content in PHP.

stdClass PDO DOMDocument

$strhtml = '<body><div id="dv1">CoursesWeb.net</div></body>';
$dochtml = new DOMDocument();
$dochtml->loadHTML($strhtml);
$elm = $dochtml->getElementById("dv1");
echo $elm->nodeValue;    // CoursesWeb.net

The history object

Javascript Course

Methods of the history object

Daily Test with Code Example

HTML

CSS

JavaScript

PHP-MySQL

Last accessed pages

Popular pages this month