导航回具有相同状态的搜索页面 (JavaScript)

Question

当用户单击搜索结果但随后返回主搜索页面时，我如何使用 JavaScript 保留搜索页面的状态。

例如

HTML：https://startech-enterprises.github.io/docs/guides/data-analytics/data-analytics.html

有 5 个元素决定页面上显示的内容：

• 侧边的三个过滤菜单中点击了什么标签

• 在顶部的搜索菜单栏中输入了什么搜索词

• 选中的分页，在底部

问题是，每当我进入搜索结果并导航回主搜索页面时，搜索页面都会自行重置，所以我必须再次重新输入搜索条件——这可能非常烦人。

如果我在浏览器中单击“后退”，搜索页面状态会保留，但搜索脚本会停止工作。此外，使用“浏览器”后退按钮只能返回一个“链接”——因此如果用户单击任何页面中的多个链接（从搜索返回），他们必须多次按下“后退”按钮才能返回到主搜索页面 - 这又不是理想的。

关于如何解决这个问题的任何想法？似乎是一个相当普遍的问题？

该站点是纯静态的（使用 Markdown 和 Jekyll 生成）。站点交互性是使用 Vanilla JavaScript 和 SASS/SCSS 设置的。

更新：现在已经根据下面给出的答案解决了这个问题

Answer 1

您只需将数据保存在用户设备中即可。您可以通过使用 cookie 或 localStorage 来完成。我更喜欢 localStorage，因为用户可以轻松拒绝 cookie。像这样-localStorage.setItem("tags",tagItemsInAnArray);然后localStorage.getItem("tags");

Answer 2

您可以使用 localStorage 来保存搜索过滤器数据。这个概念是将所有过滤器数据保存在一个数组中，并在任何重定向之前将该数组保存在浏览器的 localStorage 中。Here is an official documentation with implementation of localStorage。这是一个演示：//before redirectionlet filterData = [];localStorage.setItem("searchFilter", JSON.stringify(filterData));//after page-loadlet cachedFilterData= JSON.parse(localStorage.getItem("searchFilter"));if(cachedFilterData.length>0){    //cache data exist}//when you need to delete cachelocalStorage.removeItem("searchFilter");