How to use the History API in HTML5?

Use history.pushState() to add new history and update the URL without refreshing the page. It is suitable for maintaining navigation when dynamic content changes in a single-page application; 2. By listening to popstate events, restore the corresponding page status when the user clicks the forward or back button; 3. Use history.replaceState() to modify the current history instead of adding it, suitable for updating the URL without adding the history stack; 4. Best practices include ensuring that the server supports routing, checking API availability, avoiding cross-domain URLs, and using meaningful state objects; 5. Examples show that page jumps and history management are implemented through encapsulation functions, combining pushState and popstate to achieve smooth client routing, thereby building a single-page application with complete browser navigation support.

The History API in HTML5 allows you to manipulate the browser's session history — the pages visited in the current tab or window — without triggering a full page reload. This is especially useful for building single-page applications (SPAs) where you want to update the URL and support navigation (like back/forward buttons) while dynamically changing content.

Here's how to use the key features of the History API effectively.

1. Understanding history.pushState()

Use pushState() to add a new entry to the browser's history stack and update the URL without reloading the page.

Syntax:

 history.pushState(state, title, url);

• state : An object containing data associated with the new history entry (can be retrieved later).
• title : Currently ignored by most browsers (you can pass an empty string).
• url : The new URL to display (must be of the same origin).

Example:

 // Change URL to /page2 and add to history
history.pushState({ page: "page2" }, "", "/page2");

// You can now update the page content dynamically
document.body.innerHTML = "<h1>Page 2</h1>";

Now, when the user clicks the back button, they'll return to the previous state.

2. Handling the popstate Event

When the user navigates through history (eg, using back/forward buttons), the popstate event is fired. You need to listen for this event to restore the appropriate content.

 window.addEventListener("popstate", function(event) {
  if (event.state) {
    // Restore content based on the state object
    document.body.innerHTML = `<h1>You are on ${event.state.page}</h1>`;
  } else {
    document.body.innerHTML = "<h1>Home Page</h1>";
  }
});

Note: popstate only fires when navigating between entries created by pushState() or replaceState() , not after pushState() itself.

3. Using history.replaceState()

Unlike pushState() , replaceState() modify the current history entry instead of adding a new one.

Use case: You want to update the URL after some client-side processing without creating an extra step in history.

 // Update current history entry to /updated-page
history.replaceState({ page: "updated" }, "", "/updated-page");

This is useful when you want to clean up or modify the URL after form submission or filtering.

4. Best Practices and Tips

• Always handle back/forward navigation : Make sure your popstate listener updates the UI appropriately.
• Don't rely on URL-only changes : Since the server isn't involved, ensure your app can handle direct visits to these URLs via server-side routing (eg, using a catch-all route in SPAs).
• Check for API support :

   if (window.history && window.history.pushState) {
    // Safe to use History API
  }

• Avoid cross-origin URLs : The url parameter must be same-origin, or an error will be thrown.
• Use meaningful state objects : Store minimum but useful data (like page ID or view type) to help restore the UI later.

5. Example: Simple SPA Navigation

 function navigationTo(url, pageTitle, content) {
  const state = { url, content };
  history.pushState(state, pageTitle, url);
  document.title = pageTitle;
  document.body.innerHTML = `<h1>${content}</h1>`;
}

// Simulate navigation
navigateTo("/about", "About", "About Us");

// Handle back/forward
window.addEventListener("popstate", function(event) {
  if (event.state) {
    document.title = event.state.url;
    document.body.innerHTML = `<h1>${event.state.content}</h1>`;
  } else {
    document.body.innerHTML = "<h1>Home</h1>";
  }
});

This gives smooth navigation with working browser buttons.

Basically, the History API gives you control over the address bar and navigation flow — essential for modern web apps. Just remember to sync your UI with the history state and handle both programming and user-triggered navigation.

The above is the detailed content of How to use the History API in HTML5?. For more information, please follow other related articles on the PHP Chinese website!