BOM - History trong Javascript

Đăng bởi: TheHalfHeart - Vào ngày:

Combo 8 khóa học lập trình FullStack cực rẻ

Đây là gói combo được freetuts tạo ra nhằm giúp các bạn mua 8 khóa học tại FEDU với chi phí cực rẻ, nói chung là rẻ nhất :)

Xem tại đây

Combo 5 khóa học lập trình Frontend cực rẻ

Đây là gói combo được freetuts tạo ra nhằm giúp các bạn mua 5 khóa học tại FEDU với chi phí cực rẻ, nói chung là rẻ nhất :)

Xem tại đây

Đầy là bài thứ 3 trong danh sách các bài tìm hiểu về BOM và trong bài này chúng ta tìm hiểu đến đối tượng History trong Javascript, chúng ta chỉ tìm hiểu một số phương thức và thuộc tính hay sử dụng nhất chứ không thể trình bày một cách đầy đủ được.

1. History trong Javascript

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 và dựa vào lịch sử đó chúng ta có thể xem lại những ngày trước đã xem gì, và vấn đề này trình duyệt đã hỗ trợ cho chúng ta rồi (back, forward, clear history). Nhưng nếu bạn có nhu cầu cần sử dụng Javascript để xử lý thì vẫn có một số phương thức và thuộc tính nằm trong đối tượng History có thể giúp giải quyết vấn đề này.

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

Đế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;

Ví dụ: XEM DEMO

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

Đ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

Ví dụ:

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

2. Lời kết

Hai năm nay khi xây dựng web thì mình chưa bao giờ sử dụng đối tượng history này nên có thể liệt kê nó vào danh sách những đối tượng ít sử dụng trong javascript. Tuy nhiên nếu ứng dụng của bạn có các chức năng back, forward thì nên sử dụng đối tượng này.

Khóa học nên xem

Nguồn: freetuts.net