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的恢复。