事件 - htmx:historyCacheError

htmx:historyCacheError 是 HTMX 在处理浏览器的前进/后退操作（历史还原）时，如果缓存失败（如找不到旧内容），会触发该事件。

你可以监听这个事件，以便：

• 显示错误提示

• 回退到安全页面

• 重新发起请求加载内容

HTMX 内置了历史记录管理功能，当你使用 hx-push-url="true" 或 "replace"，HTMX 会：

• 使用 pushState() 或 replaceState() 改变 URL

• 在内部缓存页面片段（默认是 hx-target 指向的元素内容）

• 在用户点击“后退”时，从缓存中恢复内容并插入页面（触发 htmx:historyRestore）

如果缓存失败（如内存不足或页面被刷新后状态丢失），就会触发 htmx:historyCacheError。

事件参数

• detail.cause - 尝试保存历史记录时抛出的 localStorage 异常

示例代码

<nav>
  <a href="/page1" hx-get="/page1" hx-target="#main" hx-push-url="true">页面1</a>
  <a href="/page2" hx-get="/page2" hx-target="#main" hx-push-url="true">页面2</a>
</nav>

<div id="main">
  <p>点击上面的链接以加载页面内容并修改地址栏。</p>
</div>

<script>
  document.body.addEventListener("htmx:historyCacheError", function(evt) {
    console.warn("历史缓存恢复失败，当前路径:", window.location.pathname);

    // 提示用户，或自动刷新页面
    document.getElementById("main").innerHTML = `
      <p style="color:red;">页面恢复失败，请 <a href="${window.location.pathname}">点击这里</a> 重新加载。</p>
    `;
  });
</script>