JavaScript - History API

Xin chào, các bạn lập trình viên đang lớn lên! Hôm nay, chúng ta sẽ bắt đầu một chuyến hành trình đầy thú vị qua thời gian... à, đúng hơn là thời gian của trình duyệt! Chúng ta sẽ lặn vào thế giới kỳ diệu của JavaScript History API. Đừng lo lắng nếu bạn mới bắt đầu lập trình; tôi sẽ là người hướng dẫn bạn, giải thích mọi thứ từng bước một. Vậy, hãy thắt dây an toàn, và chúng ta cùng bắt đầu nhé!

Web History API

Hãy tưởng tượng bạn đang lật qua một album ảnh của kỳ nghỉ gần đây. Bạn có thể quay lại các trang trước hoặc nhảy tới các trang sau. Web History API hoạt động tương tự nhưng cho trải nghiệm duyệt web của bạn. Nó cho phép JavaScript tương tác với lịch sử của trình duyệt, giúp bạn kiểm soát việc di chuyển forwards và backwards.

Hãy tưởng tượng nó như một cỗ máy thời gian cho các trang web của bạn. Đúng là cool phải không?

Làm thế nào để sử dụng JavaScript History API?

Sử dụng History API giống như việc bạn có một remote điều khiển lịch sử của trình duyệt. Hãy chia nhỏ nó thành các bước đơn giản:

1. Truy cập API
2. Duyệt qua lịch sử
3. Thêm mới các mục vào lịch sử

Trước khi chúng ta vào mã, hãy để tôi chia sẻ một câu chuyện nhỏ. Khi tôi lần đầu tiên dạy điều này cho học sinh của mình, tôi đã sử dụng ví dụ về một cuốn sách có các bookmark. History API cho phép bạn lật trang (duyệt), thêm bookmark (thêm mới các trạng thái), và thậm chí là viết lại các trang (thay thế các trạng thái). Điều này đã giúp họ nhanh chóng nắm bắt khái niệm, và tôi hy vọng nó cũng sẽ giúp bạn!

Cú pháp

Bây giờ, hãy nhìn vào cú pháp cơ bản của History API. Đừng lo lắng; chúng ta sẽ giải thích từng phần chi tiết.

// Truy cập đối tượng History
window.history

// Các phương thức chúng ta có thể sử dụng
history.back()
history.forward()
history.go()
history.pushState()
history.replaceState()

Hãy phá vỡ chúng một một:

Bảng các phương thức

Phương thức	Mô tả
back()	Tải trang trước trong lịch sử
forward()	Tải trang sau trong lịch sử
go()	Tải trang cụ thể từ lịch sử
pushState()	Thêm một trạng thái mới vào lịch sử
replaceState()	Chỉnh sửa mục hiện tại trong lịch sử

Tải trang trước trong danh sách lịch sử

Nhớ lại khi tôi đề cập đến việc lật lại các trang trong album ảnh? Đó chính xác là điều mà history.back() làm cho các trang web của bạn. Dưới đây là cách bạn sử dụng nó:

function goBack() {
window.history.back();
}

Giả sử bạn có một nút "Back" trên trang của mình. Bạn có thể sử dụng hàm này như sau:

<button onclick="goBack()">Go Back</button>

Khi người dùng nhấp vào nút này, nó giống như họ đang nhấn nút back của trình duyệt. Đúng là kỳ diệu phải không?

Tải trang sau trong danh sách lịch sử

Bây giờ, nếu bạn muốn đi tới trước, đó là lúc history.forward() phát huy tác dụng:

function goForward() {
window.history.forward();
}

Bạn có thể sử dụng nó với một nút "Forward":

<button onclick="goForward()">Go Forward</button>

Nhấp vào nút này tương đương với việc nhấn nút forward của trình duyệt. Như nhảy tới trước trong album ảnh giả tưởng của chúng ta.

Lấy độ dài của danh sách lịch sử

Curious about how many pages are in your browser's history? The history.length property has got you covered:

console.log(history.length);

This will output the number of pages in the current session's history. It's like counting how many photos you have in your album.

Here's a fun way to display it on your page:

function showHistoryLength() {
document.getElementById('historyLength').innerHTML = 'You have ' + history.length + ' pages in your history.';
}

<button onclick="showHistoryLength()">Check History Length</button>
<p id="historyLength"></p>

Now, let's dive a bit deeper and look at some more advanced features of the History API.

Adding New Entries to the History

Sometimes, you might want to add new "pages" to the history without actually loading a new page. That's where pushState() comes in handy:

function addToHistory(state, title, url) {
history.pushState(state, title, url);
}

// Usage
addToHistory({ page: 'home' }, 'Home Page', '/home');

This adds a new entry to the history. It's like adding a new photo to your album without actually taking a new picture!

Modifying the Current History Entry

What if you want to change the current entry in the history? That's where replaceState() comes into play:

function updateCurrentState(state, title, url) {
history.replaceState(state, title, url);
}

// Usage
updateCurrentState({ page: 'updated home' }, 'Updated Home Page', '/updated-home');

This is like editing the caption of the current photo in your album.

Listening for History Changes

One last cool trick: you can listen for changes in the history using the popstate event:

window.addEventListener('popstate', function(event) {
console.log('Navigation occurred');
console.log(event.state);
});

This is like having a friend tell you whenever someone flips a page in the photo album.

And there you have it! We've journeyed through the JavaScript History API, from basic navigation to adding and modifying history entries. Remember, practice makes perfect. Try incorporating these methods into your web projects, and soon you'll be navigating through browser history like a pro!

I hope this tutorial has been helpful and maybe even a bit fun. Keep coding, keep learning, and don't forget to enjoy the journey. After all, in web development, we're all time travelers in our own way!

Credits: Image by storyset