使用推送状态时浏览器历史记录被破坏

Question

我的应用程序中有以下代码，它尝试从 URL 检索一些数据，然后使用新 URL 更新浏览器。

const response = await fetch(url);

if (response.ok) {
    ...

    window.history.pushState({ loaded: true }, null, url);
}

现在每次我点击重新获取数据（使用新的 URL）时，浏览器中的 URL 都会成功更新。但是，如果我单击“返回”，它不会执行任何操作，除非我单击足够多次以使其返回到引用的页面。

我的第一个修复是将上面的代码更改为以下内容：

const response = await fetch(url);

if (response.ok) {
    ...

    if (window.history.state && window.history.state.loaded)
        window.history.pushState({ loaded: true }, null, url);
    else
        window.history.replaceState({ loaded: true }, null);
}

现在，当我在最初加载后单击返回时，它会返回到引用的页面，因为我只是替换状态并且不将任何内容推送到历史堆栈，之前我必须单击返回两次。然而，我仍然有一个问题，当我重新获取数据时，它现在会推送到历史堆栈，并且当我单击返回时什么也不会发生。

我认为最简单的事情是当我点击返回并且数据已加载时重新加载页面。因此我尝试了以下方法：

window.addEventListener('popstate', e => {
    if (e.state && e.state.loaded)
        window.location.href = window.location.pathname + window.location.search;
});

但是现在我似乎无法返回到引用的页面。这是因为即使我重新加载页面（在“popstate”事件侦听器中），当它获取数据时，它也表示状态已加载。

我认为重新加载后这将是空的，但因为它不是，所以我想我会强制浏览器在第一次加载时确保初始状态为空：

window.addEventListener('load', e => {
    window.history.replaceState(null, null);
});

然而，虽然这最初看起来有效，但我发现这只是因为我运行了开发人员工具（禁用了缓存）。

我确信我错过了一些基本的东西，因为这似乎是一个很常见的问题。如果有人能告诉我我做错了什么，我将不胜感激。

Answer 1

我发现将我的获取请求更改为以下内容似乎可行：

await fetch(url, { cache: 'no-store' });

或者向获取的

url

添加额外的查询字符串参数也可以。