导航回具有相同状态的搜索页面 (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 中。 这是一个包含 localStorage 实现的官方文档。

这是一个演示：

//before redirection
let filterData = [];
localStorage.setItem("searchFilter", JSON.stringify(filterData));

//after page-load
let cachedFilterData= JSON.parse(localStorage.getItem("searchFilter"));
if(cachedFilterData.length>0){
    //cache data exist
}

//when you need to delete cache
localStorage.removeItem("searchFilter");