The History API Module #35

Question 1

What are the 3 methods used to engage with the History API? How is go( ) different from the rest?

Answer 1

1. back( )–Goes to the previous entry in session history
2. forward( )–Goes to the next entry in session history
3. go( )–Allows navigation backward or forward through multiple levels

Question 2

How can you determine how many levels there are in the session history?

Answer 2

history.length

Question 3

How would you put together a function that returns the user to a previous history state?

Answer 3

First hook into the dom element such as a button with something like querySelector. Then attach an event listener to the button, that listens for a “click” event. Finally fire the history( ) method on the event. Example:

document.querySelector(‘.back’).addEventListener(‘click’, ( ) => {
history.back( )
} )

Question 4

How would you go back or forward through multiple history states?

Answer 4

Use the go method. For example:

history. go(-1) //equivalent to history.back( )
history. go(-2) //equivalent to calling history.back( ) twice
history. go(1) //equivalent to history.forward( )
history. go(3) //equivalent to calling history.forward( ) 3 times

Question 5

How is an extra entry added to the history state?

Answer 5

Using pushState( )

const state = { color: 'red' }
history.pushState(state, ' ', '/anotherPage')

Question 6

What are the 3 params you pass when using the push state method

Answer 6

1. an object which can contain anything OR be empty
2. Second param is currently unusable by browsers so make it an empty string (“”)
3. The third is a URL associated with the new state. BUT the url must belong to the same domain of the current URL.

Question 7

What technique is used to manipulate the current history state?

Answer 7

replaceState( )

This accepts the same params see below:

history.replaceState(state, ‘ ‘, ‘/post/second’)

AGAIN:
1. The first is an object which can contain anything (there is a size limit however, and the object needs to be serializable).

2. The second parameter is currently unused by major browsers, so you generally pass an empty string.
3. The third parameter is a URL associated to the new state. Note that the URL needs to belong to the same origin domain of the current URL.

Question 8

What on Earth is ‘popstate’ used for?

Answer 8

This event is called on window every time the active history state changes with the current state as the callback parameter.

EXAMPLE:

window.onpopstate = event => {
console.log(event.state)
}

.state refers to the current state!

Question 9

Write a function using popstate as an event listener.

Hint: Start with window.addEventListener

Answer 9

window.addEventListener(‘popstate’, event => {
console.log(event.state)
} )