导航回具有相同状态的搜索页面 (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 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");