Đối tượng History trong javascript

minhu

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:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>History API Example</title>
    <script>
        function goBack() {
            history.back();
        }

        function goForward() {
            history.forward();
        }

        function goToPage(page) {
            history.pushState({page: page}, `Page ${page}`, `page${page}.html`);
            document.getElementById('status').textContent = `You are on Page ${page}`;
        }

        window.onpopstate = function(event) {
            if (event.state) {
                document.getElementById('status').textContent = `You are on Page ${event.state.page}`;
            }
        };
    </script>
</head>
<body>
    <h1>History API Example</h1>
    <button onclick="goBack()">Go Back</button>
    <button onclick="goForward()">Go Forward</button>
    <button onclick="goToPage(1)">Go to Page 1</button>
    <button onclick="goToPage(2)">Go to Page 2</button>
    <p id="status">You are on the initial page</p>
</body>
</html>

Lưu Ý

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.
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.

Đố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.