jQuery是一個(gè)JavaScript的庫(kù),它可以幫助我們加強(qiáng)JavaScript的功能。其中一個(gè)非常有用的功能就是頁(yè)面跳轉(zhuǎn)時(shí)保存上個(gè)頁(yè)面的狀態(tài)。以下是一個(gè)簡(jiǎn)單的實(shí)現(xiàn)方案:
$(document).ready(function() { // 當(dāng)頁(yè)面準(zhǔn)備就緒時(shí),檢查是否有要保存的狀態(tài)。 var stateObject = {}; var title = ""; var currentState = history.state; if (currentState !== null) { stateObject = currentState.stateObject; title = currentState.title; } // 為鏈接添加一個(gè)點(diǎn)擊事件監(jiān)聽(tīng)器,將當(dāng)前狀態(tài)保存。 $("a").click(function(e) { e.preventDefault(); var href = $(this).attr("href"); stateObject = { "url": href }; title = $(this).text(); history.pushState({ "stateObject": stateObject, "title": title }, title, href); window.location.href = href; }); // 當(dāng)用戶(hù)點(diǎn)擊瀏覽器的“后退”按鈕時(shí),重載頁(yè)面并恢復(fù)之前保存的狀態(tài)。 window.addEventListener("popstate", function(e) { if (e.state !== null) { stateObject = e.state.stateObject; title = e.state.title; window.location.href = stateObject.url; } }); });
這段代碼使用HTML5的History API來(lái)實(shí)現(xiàn)狀態(tài)的保存和恢復(fù)。它會(huì)在用戶(hù)點(diǎn)擊鏈接時(shí)保存當(dāng)前的URL和頁(yè)面標(biāo)題,并將其加入到瀏覽器的歷史記錄中。稍后,當(dāng)用戶(hù)點(diǎn)擊瀏覽器的“后退”按鈕時(shí),它會(huì)通過(guò)popstate事件監(jiān)聽(tīng)器恢復(fù)瀏覽器的狀態(tài)。