History trong javascript - quản lý lịch sử lướt web với javascript

Công nghệ Lập trình JavaScript

21/12
Thạch
JavaScript
0
341

Đối tượng history trong Javascript, qua đó bạn sẽ biết cách quản lý phần lịch sử lướt web trên trình duyệt bằng đối tượng window.history trong Javascript

Bài 43: Location trong Javascript - điều hướng URL trong Javascript

Trong bài này chúng ta sẽ tìm hiểu đối tượng history trong Javascript, qua đó bạn sẽ biết cách quản lý phần lịch sử lướt web trên trình duyệt bằng Javascript.

Có những ứng dụng bắt buộc bạn phải biết người dùng đã lướt qua những trang nào, để từ đó điều hướng người dùng tốt hơn. Ví dụ bạn xây dựng một ứng dụng single page, trong đó có tính năng trở lại trang trước đây, thì bạn phải sử dụng đối tượng window.history để lấy đường dẫn.

1. History trong Javascript là gì?

Khi bạn lướt web thì trình duyệt sẽ lưu lại lịch sử lướt web của bạn. Dựa vào lịch sử đó, ta có thể xem lại những ngày trước đã xem những gì, truy cập vào những trang nào.. Tuy vấn đề này đã được trình duyệt hỗ trợ bằng các tính năng (back, forward, clear history). Nhưng nếu bạn cần sử dụng Javascript để xử lý thì sẽ có đối tượng window.history giúp bạn.

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.

window.history

Và sau đây chúng ta tìm hiểu một số thành phần nằm trong history nhé.

2. Xem lịch sử lướt web bằng javascript

Các thao tác chủ yếu là xem tổng số trang đã truy cập, đi đến một trang cấp thứ bao nhiêu tính từ trang hiện tại.

Đếm tổng số trang đã lưu trong history

Nếu bạn muốn đếm tổng số trang đã lưu trong lịch sử lướt web thì bạn có thể sử dụng cú pháp sau:

var totalPage = window.history.length;

Demo

<html>
    <body>
      <script>
        alert("Tổng số trang đã lưu trong history là: " + window.history.length);
      </script>
    </body>
</html>

Đi tới một trang nào đó trong history

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

history.back() : trở lại trang trước
history.forward() : đi tới trang kế tiếp
history.go(number): đi tới một trang:
- nếu number âm thì tính từ trang hiện tại trừ đi number
- nếu number dương thì tính từ trang hiện tại cộng với number

// trở lại trang trước
window.history.back();
 
// đi tới trang kế tiếp sau khi sử dụng back()
window.history.forward()
 
// đi tới trang cách đây 5 lần lướt web
window.history.go(-5);

Ok vậy là chúng ta đã tìm hiểu một số hàm quan trọng trọng history rồi đấy.

3. Lời kết

Đối tượng history trong Javascript được đánh giá là ít khi sử dụng nhất, bởi những tính năng của nó xoay quanh việc quản lý lịch sử lướt trang, điều mà trình duyệt đã hỗ trợ rất tốt. Chỉ có một số ứng dụng single page mới cần, nhưng rất hiếm.

Bài 45: Cách dùng cookie trong Javascript