The history object

Javascript Course

- 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:

• 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.
  Add 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.
  Modify address