Lịch sử trình duyệt với Web History API trong JavaScript

Trong thời đại web hiện đại, các ứng dụng ngày càng trở nên linh hoạt và tương tác hơn. Người dùng mong đợi trải nghiệm mượt mà, không gián đoạn, kể cả khi chuyển trang hay tương tác với các thành phần trong giao diện. Đó là lý do tại sao Single Page Application (SPA) – ứng dụng web chỉ có một trang nhưng có thể thay đổi nội dung động – ngày càng phổ biến.

Tuy nhiên, để ứng dụng hoạt động như một trang web thông thường, người dùng vẫn cần sử dụng các chức năng như nút Back, Forward, hoặc gõ URL trực tiếp vào thanh địa chỉ. Lúc này, Web History API trong JavaScript trở thành một công cụ vô cùng hữu ích. Nó cho phép lập trình viên kiểm soát lịch sử trình duyệt, thay đổi URL mà không cần tải lại trang, đồng thời duy trì trải nghiệm người dùng mượt mà và logic điều hướng hợp lý.

Vậy cụ thể Web History API là gì, hoạt động ra sao và có thể ứng dụng như thế nào trong thực tế? Hãy cùng tìm hiểu trong bài viết sau.

Web History API là gì?

Web History API là một giao diện lập trình ứng dụng (API) do trình duyệt web cung cấp, cho phép các lập trình viên JavaScript truy cập, thao tác và điều khiển lịch sử duyệt web của người dùng. Thông qua đối tượng toàn cục window.history, bạn có thể thực hiện các hành động như quay lại trang trước, tiến tới trang sau, hoặc thậm chí thêm và thay đổi URL trên thanh địa chỉ mà không cần tải lại trang.

Đây là một phần quan trọng trong việc xây dựng các ứng dụng web hiện đại, đặc biệt là Single Page Applications (SPA) – nơi mà toàn bộ nội dung được xử lý bằng JavaScript và không sử dụng cơ chế điều hướng truyền thống của trình duyệt.

Mục đích sử dụng chính

Điều hướng tới các trang trước hoặc sau trong lịch sử duyệt web

Web History API cung cấp các phương thức như history.back() và history.forward() để mô phỏng thao tác của người dùng khi nhấn nút “quay lại” hoặc “tiến tới” trên trình duyệt. Điều này giúp xây dựng các chức năng điều hướng mượt mà và linh hoạt, đặc biệt hữu ích trong các ứng dụng có nhiều bước (multi-step form, trình xem ảnh, trình duyệt tab...).

Thêm hoặc thay đổi trạng thái URL mà không tải lại trang

Thông qua hai phương thức mạnh mẽ là history.pushState() và history.replaceState(), bạn có thể cập nhật URL hiển thị trên thanh địa chỉ mà không làm trang bị reload. Điều này đặc biệt quan trọng với SPA – nơi nội dung thay đổi nhưng không thực sự chuyển trang.

Ví dụ: Khi người dùng chuyển từ /san-pham sang /san-pham/ao-thun, bạn có thể cập nhật URL để phản ánh đúng trạng thái nội dung mà vẫn giữ nguyên trang hiện tại.

Hỗ trợ điều hướng và quản lý trạng thái trong SPA

Trong các SPA, việc điều hướng hoàn toàn do JavaScript kiểm soát. Lúc này, Web History API đóng vai trò như một cầu nối giữa ứng dụng và trình duyệt, giúp đồng bộ hóa hành vi của giao diện với thanh địa chỉ và nút back/forward của trình duyệt.

Ngoài ra, bạn còn có thể lưu trữ trạng thái tùy chỉnh trong đối tượng state, từ đó tái hiện nội dung giao diện đúng với vị trí mà người dùng đã truy cập trước đó.

Các phương thức quan trọng trong History API

Đối tượng window.history cung cấp nhiều phương thức hữu ích giúp thao tác với lịch sử trình duyệt. Dưới đây là các phương thức quan trọng bạn cần nắm:

history.back()

• Chức năng: Điều hướng quay trở lại trang trước đó trong lịch sử duyệt web của trình duyệt.

• Tương đương: Như khi người dùng nhấn nút "Back" trên trình duyệt.

Ví dụ:

history.back();

history.forward()

• Chức năng: Di chuyển tới trang kế tiếp trong lịch sử, nếu trước đó đã từng quay lại trang cũ.

• Tương đương: Như khi người dùng nhấn nút "Forward" trên trình duyệt.

Ví dụ:

history.forward();

history.go(n)

• Chức năng: Di chuyển tới một vị trí tương đối trong lịch sử trình duyệt.

n là số nguyên:

• n > 0: tiến tới

• n < 0: quay lại

• n = 0: tải lại trang hiện tại

Ví dụ:

history.go(-1); // tương đương history.back()
history.go(1);  // tương đương history.forward()
history.go(0);  // reload lại trang

history.pushState(state, title, url)

• Chức năng: Thêm một mục mới vào lịch sử trình duyệt, đồng thời cập nhật URL trên thanh địa chỉ mà không làm tải lại trang.

Cú pháp:

history.pushState(stateObject, title, url);

Tham số:

• stateObject: một đối tượng JSON đại diện cho trạng thái (có thể là {} nếu không dùng).

• title: (hiện chưa được trình duyệt sử dụng, có thể để chuỗi rỗng "").

• url: chuỗi URL mới (có thể là tương đối).

Ví dụ:

history.pushState({ page: 2 }, "", "/page2");

history.replaceState({ page: 1 }, "", "/home");

window.onpopstate = function(event) {
  console.log("Quay lại hoặc tiến tới", event.state);
  // Cập nhật nội dung tương ứng với state
};

// pushState - thêm một entry mới vào history
history.pushState({ page: "about" }, "", "/about");

// replaceState - ghi đè entry hiện tại
history.replaceState({ page: "home" }, "", "/home");

/san-pham?danh-muc=ao-thun
/blog/huong-dan-su-dung-history-api

window.onpopstate = function(event) {
  const state = event.state;
  if (state && state.page === "about") {
    renderAboutPage();
  } else {
    renderHomePage();
  }
};

document.getElementById("btn-about").onclick = () => {
  history.pushState({ page: "about" }, "", "/about");
  renderAboutPage(); // hàm cập nhật nội dung tương ứng
};

window.addEventListener("popstate", (event) => {
  const page = event.state?.page;
  if (page === "about") {
    renderAboutPage();
  } else {
    renderHomePage();
  }
});

document.getElementById("btn-back").onclick = () => {
  history.go(-1); // quay về entry trước đó
};