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，以便可以执行硬浏览器刷新。

指定历史快照元素

使用 body 来获取和存储历史快照是 htmx 的默认行为。如果您想将其缩小以保留特定元素的快照，则可以使用 hx-history-elt 属性来指定特定元素。您只需要确保此元素应存在于所有页面上，否则从历史记录中恢复将不起作用。

撤消第三方库的 DOM 变异

当您计划使用第三方库并希望使用 htmx 历史记录支持功能时，必须在拍摄快照之前清理 DOM。

让我们假设一个案例，其中"Tom Select"(第三方库)使 select 元素具有更丰富的用户体验。并设置 Tom Select 将任何具有 .tomselect 类的输入元素变成丰富的元素。初始化新内容中具有该类的元素。如果 .tomselect 类位于任何元素上，则所有这些输入元素都是富选择器。

htmx.onLoad(function (target) {
    // 在新内容中找到所有元素
    // 应该是编辑器并使用 TomSelect 初始化
    var editors = target.querySelectorAll(".tomselect")
    .forEach(elt => new TomSelect(elt))
});

这将合并 DOM，如果您不想合并以保存到历史记录缓存中，因为当历史记录内容重新加载到屏幕时，TomSelect 将被重新初始化。为了解决这个问题，您需要捕获 htmx:beforeHistorySave 事件并通过对它们调用 destroy() 函数来清除 TomSelect 突变。

htmx.on('htmx:beforeHistorySave', function() {
    // 查找所有 TomSelect 元素
    document.querySelectorAll('.tomSelect')
    // 并对它们调用 destroy()
    .forEach(elt => elt.tomselect.destroy())
})

禁用历史快照

如果我们在当前文档中的任何元素或通过 htmx 加载到当前文档中的任何 html 片段的 htmx-history 属性上设置 false 值，则历史快照将被禁用。这可用于阻止敏感数据进入 localStorage 缓存。

localStorage 缓存中的敏感数据对于共享使用或公共计算机非常重要。但历史导航将起作用，因为它只是从服务器请求的 URL 的恢复。

HTMX 教程

HTMX - 历史记录支持