1. BOM History trong Javascript là gì?

Khi ta mở một tab trên trình duyệt và truy cập các trang web thì trình duyệt sẽ lưu lại lịch sử truy cập. Đối tượng history trong Js sẽ lưu trữ thông tin về lịch sử trong tab này cho đến khi đóng tab lại. Và dựa vào nó ta có thể theo dõi được lịch sử của truy cập của chúng ta bằng Js. Nó sẽ giúp ta làm rất nhiều thứ. Đơn giản nhất là việc ta quay lại trang trước thì đương nhiên cần đến lịch sử để biết nó là trang nào còn quay lại được chứ.

Cũng như location , history cũng là một thành phần con của window nên chúng ta phải thông qua đối tượng window để thao tác với history .

Cú pháp :

window.history;
//hoặc
history;

2. Nhận số lượng trang được truy cập trong một phiên

Thuộc tính length của đối tượng history cung cấp cho chúng ta số lượng trang được người dùng truy cập trong tab hiện tại, bao gồm cả trang hiện tại. Ta không thể truy cập url mà người dùng đã truy cập vì mục đích bảo mật. Nhưng chúng ta có thể cho biết số lượng trang đã truy cập.

Ví dụ:

<p>Click vào button để xem kết quả</p>
<button type="button" onclick="getLenghth()">Click</button>
<script type="text/javascript">
    function getLenghth() {
        alert(history.length);
    }		
</script>

3. Đi tới một trang nào đó trong lịch sử với JavaScript

Chúng ta có ba phương thức thường dùng để đến một trang trong history :

  • back() : trở lại trang trước
  • forward() : đi tới trang kế tiếp
  • go(number): đi tới một trang

3.1. Phương thức back()

Phương thức này giúp bạn quay lại trang trước. Nó giống như việc ta nhấn vào mũi tên quay lại của trình duyệt.

Ví dụ:

<html>
<head>
<script>
function goBack() {
  window.history.back()
}
</script>
</head>
<body>

<input type="button" value="Back" onclick="goBack()">

</body>
</html>

3.2. Phương thức forward()

Phương thức này sẽ giúp chúng ta di chuyển lại trang vừa rồi, khi chúng ta vừa back() .

Ví dụ:

<html>
<head>
<script>
function goForward() {
  window.history.forward()
}
</script>
</head>
<body>

<input type="button" value="Forward" onclick="goForward()">

</body>
</html>

3.3. Phương thức go()

Phương thức go() của đối tượng history có thể hướng chúng ta đến bất kỳ trang nào từ danh sách. Số của trang chúng ta muốn truy cập được chuyển làm đối số trong hàm. Số đã qua có thể là số dương, số âm và số không. Số 0 đại diện cho trang hiện tại, số âm đại diện cho các trang trước và số dương đại diện cho các trang tiếp theo.

Cú pháp : history.go(-n);

Trong đó n là số trang mà ta muốn quay trở lại.

Ví dụ:

<p>Click vào button để xem kết quả</p>
<button type="button" onclick="getBack()">Click</button>
<script type="text/javascript">
    function getBack() {
        //quay về trang vừa load cách đây 2 lần
        history.go(-2);
    }		
</script>