Shulou(Shulou.com)06/03 Report--

What is the difference between pushState and replaceState, the new features of history in HTML5? for this question, this article introduces the corresponding analysis and solutions in detail, hoping to help more partners who want to solve this problem to find a more simple and feasible way.

The window object in DOM provides access to browser history through the window.history method, allowing you to move forward and backward in the user's access history.

Starting with HTML5, we can begin to manipulate the history stack.

1.History

Use the back (), forward (), and go () methods to move forward and backward in the user's history

Forward and backward

Step back:

The code is as follows:

Window.history.back ()

This method is the same as if the user clicked the return key on the browser toolbar.

Similarly, you can also use the following methods to generate users as:

The code is as follows:

Window.history.forward ()

Move to a specific location in the history

You can use the go () method to load specific pages from the session history.

Move back one page:

The code is as follows:

Window.history.go (- 1)

Move forward one page:

The code is as follows:

Window.history.go (1)

Similarly, you can move forward or backward multiple pages.

You can also find the total number of pages in the history stack by checking the length property of the browser history.

The code is as follows:

Var numberOfEntries = window.history.length

Note: IE supports passing URL parameters to the go () method.

two。 Add and modify history entities

Introduced since Gecko2 (Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1)

HTML5 introduces two methods, histtory.pushState () and history.replaceState (), which allow you to add and modify history entities. At the same time, these methods work with the _ window.onpostate event.

Use the history.pushState () method to modify the referrer, which can be used in the http header created for the xmlhttpRequest object after the state has been modified. This referrer will be the URL of the document when the XMLHttpRequest is created.

PushState is used to add the record of the current page to history, while replaceState is used exactly the same as pushState, except that it is used to modify the record of the current page in history.

Examples

Suppose the http://mozilla.org/foo.html page executes a JS

The code is as follows:

Var stateObj = {foo: "bar"}; history.pushState (stateObj, "page 2", "bar.html")

This method will cause the url address bar to display http://mozilla.org/bar.html, but the browser will not load the bar.html page, even if it exists.

Now assume once again that the user continues to access http://google.com, and then click back. At this point, the url address bar will http://mozilla.org/bar.html, and the page will get the popstate event (chrome), and the status object will contain a copy of stateObj. This page looks like foo.html. +

At this point, we click back again, and the URL will become http://mozilla.org/foo.html Magi document and will get another popstate event and a state object of null. This return action does not change the content of the document. May try to load after a while. Chrome)

PushState method

PushState () takes three parameters: the state object, the title (now ignored, not processed), and URL (optional). Details:

State object-the state object is a JavaScript object that relates to a new history entity created by the pushState () method. Used to store information about the items you want to insert into the history. The State object can be any Json string. Because firefox uses the user's hard drive to access the state object, the maximum storage space for this object is 640k. If it is greater than this value, the pushState () method throws an exception. If you do need more space to store, use local storage.

Title-firefox ignores this parameter now, although it may be used in the future. The safest way to use it now is to pass an empty string to prevent future modifications. Or you can send a short title to express state.

The parameter URL- is used to pass the URL of the new history entity. Note that the browser will not load the URL after calling the pushState () method. But you may try to load the URL later. For example, after the user restarts the browser, the new url may not be an absolute path. If it is a relative path, it will be relative to the existing url. The new url must be in the same domain as the existing url, otherwise pushState () will throw an exception. This parameter is optional, and if empty, it will be set to the current url of document.

In a sense, calling the pushState () method is a lot like setting _ window.location = "# foo", both of which create and activate another history entity associated with the current document, but pushState () has some additional advantages:

The new url can be any url in the same domain as the current url, by contrast, if only hash,_window.location is set, it will remain in the same document.

You don't have to modify url if you don't need it. By contrast, set _ window.location = "# foo"; only generate new history entities if your current hash is not # foo

You can associate any data with your new history entity. Using the hash-based approach, you need to encode all relevant data into a short string.

Note that the pushState () method does not cause the hashchange time to occur, even if the old and new url are just different hash.

ReplaceState () method

History.replaceState () looks a lot like pushState (), except that replaceState () is used to modify the current history entity rather than create a new one. This method is sometimes useful when you need to update a state object or the current history entity in response to some user behavior, you can use it to update the url of the state object or the current history entity.

Popstate event

The popstate event occurs when the history entity is changed. If the history entity is generated by the pushState and replaceState methods, the state property of the popstate event contains a copy of the state object from the history entity

See _ window.onpopstate for details

Read the current state

Read existing state

When a page loads, it may have a non-empty state object. This may happen when the user restarts the browser after the page sets up a state object (using pushState or replaceState). When the page reloads, the page will receive an onload event, but there will be no popstate event. However, if you read the history.state property, you will get the state object after the popstate event occurs

Var currentState = history.state

Browsers: Tested and Working In

HTML5 Browsers

Chrome 8,9,10

Firefox 4

Safari 5

Opera 11

Safari iOS 4.3

HTML4 Browsers

IE6,7,8,9

Firefox 3

Opera 10

Safari 4

Safari iOS prior to version 4.3

The difference between pushState and replaceState

History.pushState (state, title, url)

Add the current URL and history.state to the history and replace the current with the new state and URL. Does not cause the page to refresh.

State: the status information corresponding to the URL you want to jump to.

Title: you don't have to pass it

Url: the URL address to be redirected, which cannot be cross-domain.

History.replaceState (state, title, url)

Replace the current with the new state and URL. Does not cause the page to refresh.

State: the status information corresponding to the URL you want to jump to.

Title: you don't have to pass it

Url: the URL address to be redirected, which cannot be cross-domain.

There seems to be no difference between the two, but there is a big difference. PushState adds history, while replaceState does not.

This is the answer to the question about the new features of history in HTML5, pushState and replaceState, and the difference between the two. I hope the above content can be of some help to you. If you still have a lot of doubts to be solved, you can follow the industry information channel for more related knowledge.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.