\n\n\n

History API Example

\n \n \n \n \n

You are on the initial page

\n\n\n`\n\n### Lưu Ý\n\n- **Hỗ Trợ Trình Duyệt**: Các phương thức `pushState` và `replaceState` là một phần của HTML5 History API và có thể không được hỗ trợ trên các trình duyệt cũ. Kiểm tra sự hỗ trợ của trình duyệt nếu bạn cần đảm bảo tính tương thích.\n\n- **Quản Lý Trạng Thái**: Khi sử dụng `pushState` hoặc `replaceState`, hãy chắc chắn rằng bạn quản lý trạng thái của ứng dụng một cách hợp lý để tránh lỗi hoặc nhầm lẫn cho người dùng khi điều hướng trang.\n\nĐối tượng `History` rất hữu ích khi bạn cần kiểm soát lịch sử duyệt web của người dùng trong ứng dụng của bạn mà không cần tải lại trang, giúp cải thiện trải nghiệm người dùng và quản lý điều hướng hiệu quả hơn.","keywords":" JavaScript","about":[{"@type":"Thing","name":" JavaScript"}],"interactionStatistic":{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":0},"comment":[]}
TopDev

Đối tượng History trong javascript

minhu 📖 3 phút đọc

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:

`

History API Example

Bài liên quan trong # JavaScript

✓ Đã sao chép link