HTML5 History API允許在不重新加載頁面的情況下操作瀏覽器歷史記錄並更改URL，適用於單頁應(yīng)用（SPA）實現(xiàn)動態(tài)內(nèi)容切換時的導(dǎo)航和書籤功能。 1. 使用history.pushState()可向歷史記錄棧添加新條目，參數(shù)包括狀態(tài)對象、標(biāo)題（通常被忽略）和新URL，例如：history.pushState({ page: 'home' }, '', '/home'); 2. 若需更新當(dāng)前歷史條目而非新增，則使用history.replaceState()，其用法與pushState相同；3. 用戶點擊前進(jìn)/後退按鈕時可通過監(jiān)聽window.onpopstate事件處理導(dǎo)航邏輯，event.state中包含之前傳入的狀態(tài)數(shù)據(jù)。該API常用於構(gòu)建內(nèi)容異步加載、URL反映應(yīng)用狀態(tài)且支持預(yù)期導(dǎo)航行為的網(wǎng)站或SPA，並常與React Router等前端路由庫結(jié)合使用，但需自行實現(xiàn)URL變化後的內(nèi)容加載邏輯。

Using the HTML5 History API allows you to manipulate the browser history and change the URL without reloading the page. This is especially useful for single-page applications (SPAs) where content changes dynamically but you still want proper URL navigation and bookmarking.

Push New State to History

The most commonly used method is history.pushState() . It lets you add a new entry to the browser's session history stack.

• Parameters :
  pushState(state, title, url)
  • state : an object associated with the new history entry (can be null )
  • title : historically intended for the document title, but most browsers ignore this
  • url : the new URL to appear in the address bar (relative or absolute)

Example:

 history.pushState({ page: 'home' }, '', '/home');

After running this, the URL changes to /home , but the page doesn't reload. You can use this to simulate navigation in SPAs.

Replace Current State

If you don't want to create a new history entry but instead update the current one, use history.replaceState() .

It works just like pushState() , but replaces the current history entry rather than adding a new one.

This is handy when you want to update the URL after some user interaction without creating extra back/forward steps.

Example:

 history.replaceState({ page: 'profile' }, '', '/user/profile');

This keeps the user on the same logical page but updates the URL and state.

Responding to Back/Forward Navigation

When users click the back or forward buttons, your app should respond appropriately. That's where the popstate event comes in.

• Attach a listener to window.onpopstate :

   window.addEventListener('popstate', function(event) {
  // Handle navigation here based on event.state
  });

  Note that event.state contains the state object you passed to pushState() or replaceState() .

  Keep in mind that not all browsers fire popstate on initial page load, so you may need to check history.state separately.

  When to Use It

  You'll typically reach for the History API when building dynamic websites or SPAs where:

  • Content loads without full page refreshes
  • URLs need to reflect current app state
  • Users expect back/forward buttons to work as expected

  It pairs well with client-side routing libraries like React Router or Vue Router, which internally use this API.

  But remember: changing the URL won't automatically fetch new content — that part is up to you to implement.

  基本上就這些。

  以上是如何使用HTML5歷史記錄API？的詳細(xì)內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！