Trong JavaScript, đối tượng History cung cấp phương thức để thao tác với lịch sử của trình duyệt, bao gồm điều hướng qua các trang đã truy cập trước đó. Đối tượng History là một phần của đối tượng window và cho phép bạn kiểm soát hành vi của lịch sử duyệt web trong trang web của bạn.

Các Thuộc Tính và Phương Thức Của Đối Tượng History#

Phương Thức

• history.back() Mô Tả: Di chuyển đến trang trước đó trong lịch sử trình duyệt, tương đương với việc nhấp vào nút "Quay lại" của trình duyệt.

  • Cú Pháp: history.back();

• history.forward() Mô Tả: Di chuyển đến trang tiếp theo trong lịch sử trình duyệt, tương đương với việc nhấp vào nút "Tiếp theo" của trình duyệt.

  • Cú Pháp: history.forward();

• history.go(delta) Mô Tả: Di chuyển trong lịch sử trình duyệt theo một số bước. Tham số delta là số nguyên, với giá trị dương di chuyển về phía trước và giá trị âm di chuyển về phía sau.

  • Cú Pháp: history.go(delta);

  • Ví Dụ: history.go(-1); // Tương đương với history.back() history.go(2); // Di chuyển tới trang thứ ba kể từ trang hiện tại

• history.pushState(state, title, url) Mô Tả: Thay đổi URL trong thanh địa chỉ mà không làm mới trang. Thêm một trạng thái mới vào lịch sử của trình duyệt.

  • Tham Số: state: Một đối tượng đại diện cho trạng thái của trang. Nó sẽ được lưu trữ và có thể được truy xuất khi người dùng điều hướng trở lại trang này.

    • title: Tiêu đề mới cho trang. Hầu hết các trình duyệt hiện tại sẽ bỏ qua giá trị này.

    • url: URL mới để hiển thị trên thanh địa chỉ của trình duyệt.

  • Ví Dụ: history.pushState({page: 1}, "Page 1", "page1.html");

• history.replaceState(state, title, url) Mô Tả: Thay đổi URL trong thanh địa chỉ mà không làm mới trang và thay thế trạng thái hiện tại trong lịch sử của trình duyệt thay vì thêm một trạng thái mới.

  • Tham Số: state: Một đối tượng đại diện cho trạng thái của trang.

    • title: Tiêu đề mới cho trang. Hầu hết các trình duyệt hiện tại sẽ bỏ qua giá trị này.

    • url: URL mới để hiển thị trên thanh địa chỉ của trình duyệt.

  • Ví Dụ: history.replaceState({page: 2}, "Page 2", "page2.html");

Thuộc Tính

• history.length Mô Tả: Trả về số lượng mục trong lịch sử trình duyệt.

  • Cú Pháp: console.log(history.length);

  • Ví Dụ: console.log("Number of entries in history: " + history.length);

Ví Dụ Tích Hợp#

Dưới đây là một ví dụ đơn giản về cách sử dụng đối tượng History để thay đổi URL và quản lý lịch sử trang:

`