HTMX - 歷史支援

HTMX是一個強大的庫，允許開發者直接從HTML訪問現代瀏覽器的功能（瀏覽器歷史API），而無需使用大量的JavaScript。

htmx歷史支援如何工作？

下面提到的步驟將指導您瞭解htmx歷史支援如何在瀏覽器中工作。

步驟 1：如果您希望某個元素將其請求URL推入瀏覽器導航欄，以將頁面的當前狀態新增到瀏覽器歷史記錄中，則必須使用hx-push-url屬性。如果使用者點選連結，則htmx將在請求到達/content之前儲存當前DOM。然後，它將交換並向瀏覽器的歷史堆疊中推送一個新位置。

<a hx-get="/content" hx-push-url="true">Content</a>

步驟 2：如果使用者點選瀏覽器的後退按鈕，則將恢復先前的內容，模擬從快取“返回”到先前狀態。

步驟 3：如果地址可從快取訪問，則它將請求一個Ajax請求，HX-History-Restore-Request設定為true，並從HTML請求整個網頁。或者它將設定htmx.config.refreshOnHistoryMiss為true，以便可以執行硬瀏覽器重新整理。

指定歷史快照元素

htmx的預設行為是使用body來獲取和儲存歷史快照。如果您想將其縮小到保留特定元素的快照，則可以使用hx-history-elt屬性來指定特定元素。您只需要確保此元素應該存在於所有頁面上，否則從歷史記錄中恢復將不起作用。

撤銷第三方庫的DOM修改

當您計劃使用第三方庫並希望使用htmx歷史支援功能時，您必須在拍攝快照之前清理DOM。

讓我們假設一個案例，“Tom Select”（一個第三方庫），使選擇元素擁有更豐富的使用者體驗。並設定Tom Select將任何具有.tomselect類的輸入元素轉換為豐富的元素。初始化新內容中具有該類的元素。如果任何元素上都有.tomselect類，則所有這些輸入元素都是豐富的選擇器。

htmx.onLoad(function (target) {
 // find all elements in the new content that 
 // should be an editor and init w/ TomSelect
 var editors = target.querySelectorAll(".tomselect")
 .forEach(elt => new TomSelect(elt))
});

這將合併DOM，如果您不想合併以儲存到歷史快取，因為當歷史內容載入回螢幕時，TomSelect將被重新初始化。為了解決這個問題，您需要捕獲htmx:beforeHistorySave事件，並透過呼叫其上的destroy()函式來清除TomSelect修改。

htmx.on('htmx:beforeHistorySave', function() {
 // find all TomSelect elements
 document.querySelectorAll('.tomSelect')
 // and call destroy() on them
 .forEach(elt => elt.tomselect.destroy()) 
})

停用歷史快照

如果我們在當前文件或任何透過htmx載入到當前文件中的html片段中的任何元素上設定htmx-history屬性的false值，則將停用歷史快照。這可以用來阻止敏感資料進入localStorage快取。

localStorage快取中的敏感資料對於共享使用或公共計算機很重要。但是歷史導航將按原樣工作，它只是一個從伺服器請求的URL的恢復。