使用 pushstate 在 2 个页面之间导航时如何访问历史记录状态？

Question

我正在开发我的第一个 PWA，目前在开始编写任何代码之前正在做一些研究。 我可以解决的一件事是两个缓存页面之间的导航。

我的 PWA 包含 2 个页面，页面 A 显示项目列表和页面 B，当您单击页面 A 上的项目时导航到页面 B。

我打算使用 history.pushstate 来存储在页面 A 上单击的项目 ID，然后当页面 B 加载时，它应该准备好状态并根据存储的内容请求所需的数据。

我做了一个测试页面，可以看到将console.log('Hello Kitty')到页面B 被触发了，所以在页面B 上执行JS 应该很简单。 但是当我尝试从 B 页上的 history.state 读取时，它为空。

我的问题是，如何在页面 A 和 B 之间导航并在加载页面 B 时读取我在 history.state 中存储的内容？

我还没有任何真正的代码可以展示。 我计划使用 Web 组件，但不使用任何类型的框架或库，只使用普通的 JavaScript。

Answer 1

我打算使用 history.pushstate 来存储在页面 A 上单击的项目 ID，然后当页面 B 加载时，它应该准备好状态并根据存储的内容请求所需的数据。

history.pushState不是为存储而设计的。 但是，您可以使用 JavaScript 使用自定义状态对象从 A 导航到 B：

在 A 页：

history.pushState(obj, "", "B");
location.reload();

在 B 页：

console.log(history.state); // Should log `obj`

但是，您无法“存储”状态，使用普通超链接导航到 B 并访问状态。 历史状态是为了在单页 Web 应用程序中导航而无需加载新页面。 在这种情况下，我更愿意在 B 的 URL 中使用查询字符串。