This is the 6th day of my participation in the August More Text Challenge

In the last video, when we talked about address bar hopping, we talked about the fact that the browser caches the url sequence that the user accesses. We can access the url sequence using the browser’s forward and back buttons or using javascript methods, but we only talked about window.history.go.

As a sidebar, these global methods are all attached to the Window object, so you can omit the window in the following methods, such as window.location.

window.history.back()

This method returns to the previous page, which is the browser’s back button, and has the same effect as window.history.go(-1).

window.history.forward()

Window.history.forward () corresponds to window.history.back() by going to the next page, which is the browser’s forward button, and window.history.go(1) does the same thing.

history.pushState()

History.pushstate () takes three arguments and is used as follows

history.pushState(state, title[, url])
Copy the code

state

The state object is a JavaScript object associated with the new history entry created by pushState(). The POPState (EN-US) event is emitted every time the user navigates to a new state, and the state attribute of the event contains a copy of the state object for the history entry.

title

It’s kind of like a page title, but it’s not really useful right now, so you can ignore it, right

url

So this is, of course, the main thing we’re going to use, a URL, and when we use this method, that URL is going to appear in the address bar.

Speaking of usage, what does this method do? As we said, the history will cache a user to access the url of the sequence, the jump page, will add a new url in the sequence, but the role of this method are to add a url, and displayed in the status bar, just not immediately jump, when you use it, it will only add target url to the sequence, It appears in the address bar, but it doesn’t load and jump to the page immediately, but if you go to a new page, when you click back, or when the current page refreshes, the browser will load and jump to your new URL. Note, however, that this method does not jump to the outside of the site, it can only jump to the site’s address (under the same domain name).

Open any web page, enter the following code in the control bar, see what has changed in the address bar, is the page unchanged, then click the refresh button to try

history.pushState({}, 'title'.'/user')
Copy the code

history.replaceState()

Unlike pushState, replaceState does not add to the sequence, but modifies the current URL, just as location.href differs from location.replace. Using this feature, we can dynamically modify the parameters of the address bar, so that next time the user refresh different effect, such as we have received from other page jump to the page will carry a signal parameters, after we finish with this parameter you can delete this parameter, in order to display the page default content.

popstate

Popstate is similar to an event function. When the user clicks back or forward in the browser, or calls histroy.back(), history.go(), history.forward() in js, the popState event is triggered. PushState and replaceState do not trigger this event. With this feature, we can do something while the user is moving forward or back to the page.