导航回到状态相同的搜索页(JavaScript) [英] Navigating back to Search Page with same state (JavaScript)

问题描述

当用户单击搜索结果，然后又回到主搜索页面时，如何使用JavaScript保留搜索页面的状态.

How do I, using JavaScript, retain the state of the search page, when a user clicks into a search result, but then goes back to the main search page.

例如

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

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

There are 5 elements that determine what is shown on the page:

• 在侧面的三个过滤器菜单中单击了哪些标签
• 在顶部的搜索菜单栏中键入什么搜索词
• 在底部选择的分页页面

问题是，每当我进入搜索结果并导航回到主搜索页面时，搜索页面都会重置自身，因此我必须再次重新输入搜索条件-这可能很烦人.

Problem is that whenever I go into the search result, and navigate back to the main search page, the search page resets itself, so I have to re-enter the search criteria again - which can be quite annoying.

如果我在浏览器中单击返回"，则将保留搜索页面状态，但是搜索脚本将停止工作.另外，使用浏览器"后退按钮只会返回一个链接"-因此，如果用户单击任意页面中的多个链接(从搜索中返回)，则他们必须多次按下后退"按钮才能返回转到主搜索页面-还是不理想.

If I click 'back' in the browser, the search page state is retained, but the search script stops working. Also, using the 'browser' back button only goes back one 'link' - so if the user clicks on several links in any page (returned from the search), they have to press the 'back' button many times, to get back to the main search page - which again isn't ideal.

关于如何解决此问题的任何想法?看起来是一个相当普遍的问题吗?

Any ideas on how to solve this? Would seem like a fairly common problem?

该站点是纯静态的(使用Markdown和Jekyll生成).网站互动性是通过Vanilla JavaScript和SASS/SCSS设置的.

The site is purely static, (generated using Markdown and Jekyll). Site interactivity is set with Vanilla JavaScript, and SASS/SCSS.

请帮忙！

非常感谢.

Sachin

更新: 现在，已根据以下给出的答案解决了此问题

UPDATE: This has now been solved based on the answers given below

推荐答案

您只需将数据保存在用户设备中即可.您可以使用Cookie或localStorage来实现.我更喜欢localStorage，因为用户可以轻松拒绝cookie. 像这样-

You can simply do it by saving the data in users device . You can do it by using cookies or by localStorage. I prefer localStorage because users can deny cookies easily. Like this-

localStorage.setItem("tags",tagItemsInAnArray);

以及随后的localStorage.getItem("tags");

这篇关于导航回到状态相同的搜索页(JavaScript)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！