Thuộc tính history trong window

Thuộc tính history của đối tượng Window tham chiếu đến đối tượng History. Nó chứa lịch sử phiên của trình duyệt, danh sách tất cả các trang đã truy cập.

Thuộc tính history trong Window

Vì Window là một đối tượng toàn cục (global object) và nó nằm trên cùng của chuỗi phạm vi (scope chain).

Do đó, các thuộc tính của đối tượng Window, tức là window.history có thể được truy cập mà không cần window làm tiền tố.

Ví dụ window.history.length có thể được viết dưới dạng history.length

Phần tiếp theo bên dưới đây sẽ hướng dẫn bạn cách lấy thông tin lịch sử duyệt web của người dùng.

Tuy nhiên, vì lý do bảo mật, các tập lệnh không được phép truy cập vào các URL được lưu trữ.

1. Lấy số lượng trang đã được truy cập thông qua history

Thuộc tính window.history.length có thể được sử dụng để lấy số trang trong lịch sử phiên của trình duyệt cho cửa sổ hiện tại.

Nó cũng bao gồm trang đang tải.

Bạn có thể hiểu cách lưu trữ dữ liệu của history như là một mảng. Người dùng truy cập bao nhiêu trang thì nó nhét vào một mảng history.

Do đó, chúng ta chỉ cần sử dụng thuộc tính lenght là biết mảng đó có bao nhiêu phần tử, tương đương với việc người dùng đã truy cập bao nhiêu trang.

Đọc thêm: Mảng trong JavaScript

Vì thế, bạn có thể sử dụng thuộc tính này để biết người dùng đã truy cập bao nhiêu trang trong phiên trình duyệt hiện tại, như được minh họa trong ví dụ sau:

<script>
function getViews() {
    alert("Bạn đã truy cập " + history.length + " trang trong phiên này");
}
</script>
 
<button type="button" onclick="getViews();">Đếm số trang đã xem</button>

2. Tạo nút Back về trang trước liền kề với history

Bạn có thể sử dụng phương thức back() của đối tượng History, tức là history.back() để quay lại trang trước liền kề trong lịch sử phiên.

Nó giống như cách nhấp vào nút Back của của trình duyệt đó.

Ví dụ:

<script>
function goBack() {
    window.history.back();
}
</script>
 
<button type="button" onclick="goBack();">Back</button>

2. Tạo nút Forward để đi đến trang tiếp theo với history

Bạn có thể sử dụng phương thức forward() của đối tượng History, tức là history.forward() để chuyển tới trang tiếp theo trong lịch sử phiên.

Nó giống như cách nhấp vào nút forward (thường gọi là next) của trình duyệt.

<script>
function goForward() {
    window.history.forward();
}
</script>
 
<button type="button" onclick="goForward();">Forward</button>

3. Đi đến một trang cụ thể với history

Bạn cũng có thể tải trang cụ thể từ lịch sử phiên bằng phương thức go() của đối tượng History, tức là history.go().

Phương thức này nhận một số nguyên làm tham số.

    + Nếu bạn truyền vào một số nguyên âm, thì nó sẽ lùi lại trang trước trong lịch sử phiên.

    + Nếu bạn truyền vào một số nguyên dương, thì nó sẽ tiến lên trang tiếp trong lịch sử phiên.

Như ở phần trên mình đã nói, history lưu trữ dữ liệu giống như mảng. Do đó, vị trí hiện tại của người dùng là một vị trí trong mảng.

Ví dụ, người dùng đang ở vị trí n (trong mảng), để tiến lên 3 bước thì sẽ là vị trí n + 3 trong mảng.

Ví dụ:

window.history.go(-3);  // Lùi về 3 trang
window.history.go(-1); // Lùi về 1 trang
window.history.go(0);  // Tải lại trang hiện tại
window.history.go(1);  // Tiến lên 1 trang
window.history.go(3);  // Tiến lên 3 trang

Lưu ý: Nếu bạn cố gắng truy cập trang không tồn tại trong lịch sử của cửa sổ thì các phương thức back(), forward() và go() sẽ đơn giản là không làm gì cả.

Ok, vậy là bạn đã biết cách đơn giản để tạo ra chức năng Back, Forward trên trang web với thuộc tính history của đối tượng History trong window rồi đấy.

Hi vọng những kiến thức này giúp bạn học lập trình web thú vị hơn.

Nếu bạn đang bắt đầu học lập trình web và muốn học Full Stack thì KHÓA HỌC FULL STACK tại NIIT - ICT Hà Nội sẽ giúp bạn học bài bản hơn, nhanh chóng hơn. Tham khảo ngay bạn nhé.

Đọc thêm: Thuộc tính location trong window