HTML5 practice and analysis-history Management (history Object)

HTML5 adds a new management of history, and updates the history object to make it easier to manage historical states. In modern Web applications, you can use the forward and backward buttons to switch historical pages. This allows some new pages that are not opened in the new page to move forward and backward freely, improving the user experience.

Through the haschange event, you can know when the URL parameter changes, that is, when to respond. Through the status management API, you can change the browser URL without loading a new page. Therefore, you must use the history. pushState () method. The history. pushState () method receives three parameters: 1. content to be saved 2. Title (generally an empty string) 3. Address (optional ). Example

　　JavaScript code

history.pushState({name: "menglong"}, '', "li.html");

After the history. pushState () method is executed, the new State information is added to the history state stack, and the browser address bar is changed to a new relative URL. However, the browser does not want the server to send requests. Even if the historical status changes, the location. href will return the same address as in the address bar. In addition, the second parameter has not yet been implemented by the browser, so you can just input an empty string or a short title. The first parameter should provide as much information as possible to initialize the page status.

Because the history. pushState () method creates a new historical state, you can also use the "back" button. Press the "back" button to trigger the popstate event of the window object. The event object of the Popstate event has a state attribute, which contains the state object that was originally passed to pushState () with the first parameter. Example

　　JavaScript code

Window. addEventListener ('popstate', function (ev) {var state = event. state; if (state) {// when the first page is loaded, the state is empty processState (state) }}, false );

After an object in this state is obtained, the page must be reset to the State indicated by the data in the state object (because the browser will not automatically do this for you ). Remember, the first page loaded by the browser is not in the status, so "back" when a Niu returns the first page loaded by the browser, the event. state value is null.

To update the current historical status, you can call replaceState (). The passed parameters are the same as the first two parameters of the pushState () method. Calling replaceState () does not create a new state in the History state stack, but only overwrites the current state. Example

　　JavaScript code

history.replaveState({name: "meng"}, "meng1234");

When using the history state management mechanism of HTML5, make sure that every "fake" URL created using pushState () is used, there is a real and actual URL on the Web server. Otherwise, the "refresh" button on a single machine will cause a 404 error.

Browsers that support HTML5 history status management include Chrome, Safari 5 +, Firefox 4 +, and Opera 11.5 +. In Safari and Chrome, status objects passed to pushState () or replaceState () cannot contain DOM elements. Firefox supports the inclusion of DOM elements in State objects. Opera also supports the history. state attribute, which returns the status object of the current state. The following is a small example of time. In combination with small examples, we can better understand the History Management in HTML5.

　　Add href values for History Management

　　HTML code

　　JavaScript code

// Onhashchange: event: the event triggered when the hash value changes // The History Management window appears when the hash value changes. onload = function () {var oInput = document. getElementById ('input1'); var oDiv = document. getElementById ('div1 '); var obj ={}; oInput. onclick = function () {var number = randomNum (35,7); oDiv. innerHTML = number; var oRN = Math. random (); obj [oRN] = number; window. location. hash = oRN ;}; window. onhashchange = function () {var number = obj [window. location. hash. substring (1)] | ''; oDiv. innerHTML = number ;}; function randomNum (all, now) {var arr = []; var newArr = []; for (var I = 1; I <= all; I ++) {arr. push (I) ;}for (var I = 0; I
 
  

  

  

  
　　Use the history object in html5.
  


  


  
　　HTML code
  


  

  

  

  

  

  
　　JavaScript code
  


  

  
// PushState: three parameters: 1. content to be saved 2. title (generally an empty string) 3. address (optional) // history. pushState ({name: "menglong"}, ''," li.html "); window. onload = function () {var oInput = document. getElementById ('input1'); var oDiv = document. getElementById ('div1 '); var iNow = 0; oInput. onclick = function () {var number = randomNum (35,7); oDiv. innerHTML = number; history. pushState (number, '', iNow ++) ;}; window. onpopstate = function (ev) {// historical management changes will trigger var number = ev. state | ''; oDiv. innerHTML = number ;}; function randomNum (all, now) {var arr = []; var newArr = []; for (var I = 1; I <= all; I ++) {arr. push (I) ;}for (var I = 0; I
   
    

    

    

    
The history object of HTML5 practice and analysis is introduced here. For more information about HTML5, see the HTML5 practice and analysis channel of Menglong xiaozhan. Thank you for your support.