Table of contents
Open Table of contents
1. Window Location (Thông tin URL)
Đối tượng location chứa thông tin về URL hiện tại và cung cấp các phương thức để chuyển hướng trang:
- Các thuộc tính phân tách URL:
href: Toàn bộ địa chỉ URL (Ví dụ:https://tuannda.dev/posts/js/).hostname: Tên miền (tuannda.dev).pathname: Đường dẫn sau tên miền (/posts/js/).protocol: Giao thức (https:).search: Phần tham số trên URL (Bắt đầu bằng dấu?).
- Các phương thức điều hướng:
assign(url): Tải một trang web mới.replace(url): Thay thế trang hiện tại bằng trang mới (Người dùng không thể bấm nút Back để quay lại trang cũ).reload(): Tải lại trang hiện tại.
2. Window History (Lịch sử duyệt web)
Đối tượng history chứa các trang mà người dùng đã đi qua trong tab hiện tại:
back(): Quay lại trang trước đó (Giống hệt nút Back trên trình duyệt).forward(): Đi tới trang tiếp theo (Giống nút Forward).go(relative_number): Nhảy tới một số lượng trang cụ thể (Ví dụ:go(-2)để lùi lại 2 trang).length: Trả về số lượng trang có trong danh sách lịch sử.
3. History API nâng cao (Dùng cho SPA)
Ngày nay, để thay đổi nội dung trang mà không reload nhưng vẫn đổi được URL đẹp, chúng ta dùng pushState():
// Thêm một mục mới vào lịch sử mà không tải lại trang
history.pushState({page: 1}, "title 1", "?page=1");Lời kết Tập 9
Điều phối luồng đi của người dùng một cách thông minh sẽ tạo ra cảm giác ứng dụng chạy cực kỳ mượt mà. Trong Tập 10, chúng ta sẽ khám phá sâu hơn về bộ máy lưu trữ Navigator & Storage Reference để quản lý dữ liệu offline.
Hẹn gặp lại các bạn!