PHẦN CƠ BẢN
VÒNG LẶP
DATA TYPES
EVENTS
DOM
BOM
OBJECT
BỔ SUNG
THỰC HÀNH
CÁC CHỦ ĐỀ
BÀI MỚI NHẤT
MỚI CẬP NHẬT

History trong Javascript - quản lý lịch sử lướt web với 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.

banquyen png
Bài viết này được đăng tại freetuts.net, không được copy dưới mọi hình thức.

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

Cùng chuyên mục:

Cách gộp hai object javascript lại với nhau

Cách gộp hai object javascript lại với nhau

Cách lấy chiều dài của object trong Javascript

Cách lấy chiều dài của object trong Javascript

Hướng dẫn giải phương trình bậc 1 bằng Javascript

Hướng dẫn giải phương trình bậc 1 bằng Javascript

Cách dùng nextSibling trong javascript

Cách dùng nextSibling trong javascript

Cách dùng insertAdjacentHTML trong javascript

Cách dùng insertAdjacentHTML trong javascript

Cách dùng innerHTML trong Javascript

Cách dùng innerHTML trong Javascript

Cách dùng insertBefore trong javascript

Cách dùng insertBefore trong javascript

Cách dùng insertAfter trong Javascript

Cách dùng insertAfter trong Javascript

Cách dùng parentNode trong Javascript

Cách dùng parentNode trong Javascript

Cách dùng parentElement trong Javascript

Cách dùng parentElement trong Javascript

Tính tổng các phần tử trong mảng javascript

Tính tổng các phần tử trong mảng javascript

Tính tổng hai số bằng Javascript (cộng hai số)

Tính tổng hai số bằng Javascript (cộng hai số)

Cách gán giá trị cho thẻ input trong javascript

Cách gán giá trị cho thẻ input trong javascript

Để gán giá trị cho thẻ input thì ta có hai cách, thứ nhất là…

Cách kiểm tra số nguyên âm trong javascript

Cách kiểm tra số nguyên âm trong javascript

Cách kiểm tra số nguyên dương trong javascript

Cách kiểm tra số nguyên dương trong javascript

Hàm closure trong javascript

Hàm closure trong javascript

Closure là một khái niệm không phải ai cũng ..

Biểu thức chính quy RegEx trong Javascript

Biểu thức chính quy RegEx trong Javascript

Bài này chúng ta sẽ tìm hiểu đến chuỗi và cách sử dụng biểu thức…

Cách dùng Import / Export Module trong javascript

Cách dùng Import / Export Module trong javascript

Khi bạn xây dựng một ứng dụng nhỏ thì việc đặt

Cơ chế hoạt động của hoisting trong Javascript

Cơ chế hoạt động của hoisting trong Javascript

Hoisting là vấn đề liên quan đến cách khai báo biến trong Javascript. Nó liên…

Cấp độ private / protected của class trong Javascript

Cấp độ private / protected của class trong Javascript

Top