Web APIs (navigator, geolocation, history)

What is the purpose of the pushState() method in this code?

// User clicks on a tab
document.getElementById('aboutTab').addEventListener('click', function() {
  displayAboutContent();
  history.pushState({page: 'about'}, 'About Us', '/about');
});

// Handle back/forward navigation
window.addEventListener('popstate', function(event) {
  if (event.state && event.state.page) {
    switch(event.state.page) {
      case 'about':
        displayAboutContent();
        break;
      case 'products':
        displayProductsContent();
        break;
      default:
        displayHomeContent();
    }
  } else {
    displayHomeContent();
  }
});

To push new content to the server
To save the application state for later retrieval
To add a new entry to the browser history and change the URL without reloading the page
The pushState() method adds a new history entry and changes the URL without page reload: 1) It creates a new entry in the browser's session history stack, 2) It updates the URL displayed in the address bar to '/about' without triggering navigation, 3) It associates state data ({page: 'about'}) with this history entry for later retrieval, 4) It allows the application to maintain distinct, bookmarkable URLs for different views in a single-page application, 5) The first parameter stores arbitrary state data retrievable if the user navigates through history, 6) The second parameter sets the page title (though many browsers currently ignore this), 7) The third parameter changes the displayed URL (must be on the same origin for security), 8) This method is fundamental to implementing client-side routing in modern web applications.
To force the browser to load a new page

Next Question (12/40)