JavaScript - History API

你好，初露头角的程序员們！今天，我們將踏上一段令人興奮的時光之旅……不過，是瀏覽器的時光之旅！我們將深入探索JavaScript History API的迷人世界。如果你是編程新手，別擔心；我將成為你的友好導遊，一步步解釋一切。所以，繫好安全帶，讓我們開始吧！

網頁歷史 API

想像一下你正在翻閱最近旅行的相冊。你可以回到前一頁，或者跳到後面的頁面。網頁歷史API的工作原理與此類似，但面向你的網頁瀏覽體驗。它允許JavaScript與瀏覽器的歷史互動，給你對返回和前進導航的控制。

把它當作是你網頁的時光機。酷炫吧？

如何使用JavaScript History API？

使用History API就像擁有瀏覽器歷史的遙控器。讓我們把它分解成簡單的步驟：

存取API
通過歷史導航
向歷史中添加新的條目

在我們深入代碼之前，讓我分享一個小故事。當我第一次教我的學生這個時候，我用了書和書籤的比喻。History API讓你可以翻頁（導航）、添加書籤（推入新的狀態），甚至重寫頁面（替換狀態）。這幫助他們迅速掌握概念，我希望這也能幫助你！

語法

現在，讓我們看看History API的基本語法。別擔心；我們會詳細解釋每一部分。

// 存取History對象
window.history

// 我們可以使用的方法
history.back()
history.forward()
history.go()
history.pushState()
history.replaceState()

讓我們一一分解這些：

方法表格

方法	描述
back()	載入歷史中的前一頁
forward()	載入歷史中的下一頁
go()	載入歷史中的特定頁面
pushState()	向歷史中添加新的狀態
replaceState()	修改當前的歷史條目

在歷史列表中加載前一頁

記得上次我提到翻回到相冊的前一頁嗎？history.back()對你的網頁做的就是這樣的事情。這是怎麼用的：

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

假設你頁面上有一個“返回”按鈕。你可以這樣使用這個函數：

<button onclick="goBack()">返回</button>

當用戶點擊這個按鈕時，就像他們點擊瀏覽器的返回按鈕一樣。神奇吧？

在歷史列表中加載下一頁

現在，如果你想要前進呢？這時history.forward()就派上用場了：

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

你可以這樣使用它來添加一個“前進”按鈕：

<button onclick="goForward()">前進</button>

點擊這個按鈕等於按瀏覽器的前進按鈕。就像在我們假想的相冊中跳過一些頁面。

獲取歷史列表的長度

好奇瀏覽器歷史中有多少頁面嗎？history.length屬性可以告訴你：

console.log(history.length);

這將輸出當前會話歷史中的頁面數量。這就像計算你的相冊中有多少張照片。

這裡有一個有趣的辦法在頁面上顯示它：

function showHistoryLength() {
document.getElementById('historyLength').innerHTML = '你的歷史中有 ' + history.length + ' 頁。';
}

<button onclick="showHistoryLength()">檢查歷史長度</button>
<p id="historyLength"></p>

現在，讓我們更深入地看看History API的一些進階功能。

向歷史中添加新的條目

有時候，你可能想要在不真正加載新頁面的情況下向歷史中添加新的“頁面”。這時pushState()就派上用場了：

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

// 使用
addToHistory({ page: 'home' }, '首頁', '/home');

這將向歷史中添加一個新的條目。這就像在不拍新照片的情況下向你的相冊中添加一張新照片！

修改當前的歷史條目

如果你想改變歷史中的當前條目呢？這時replaceState()就派上用場了：

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

// 使用
updateCurrentState({ page: '更新後的首頁' }, '更新後的首頁', '/updated-home');

這就像編輯你相冊中當前照片的說明。

監聽歷史變化

最後一個很酷的技巧：你可以使用popstate事件來監聽歷史的變化：

window.addEventListener('popstate', function(event) {
console.log('導航發生');
console.log(event.state);
});

這就像有一個朋友告訴你，當有人翻動相冊時。

這就是我們對JavaScript History API的旅程，從基本導航到添加和修改歷史條目。記住，熟能生巧。嘗試在你的網頁項目中整合這些方法，很快你就能像專家一樣導航瀏覽器歷史！

我希望這個教程對你有幫助，也許還有點樂趣。持續編程，持續學習，並記得享受旅程。畢竟，在網頁開發中，我們都是自己方式的時間旅行者！

Credits: Image by storyset