Bài 32: BOM - History trong Javascript

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

Hãy để lại link bài viết gốc khi chia sẻ bài viết này, mình sẽ report DMCA với những website lấy nội dung mà không để nguồn hoặc copy bài với số lượng lớn.

Nguồn: freetuts.net

Profile photo of adminTheHalfHeart

TheHalfHeart

Có sở thích viết tuts nên đã từng tham gia viết ở một số diễn đàn, đến năm 2014 mới có điều kiện sáng lập ra freetuts.net. Sinh năm 90 và có 1 vợ 2 con, thích ca hát và lập trình.

ĐĂNG BÌNH LUẬN: Đăng câu hỏi trên Group Facebook để được hỗ trợ nhanh nhất.