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

2023-12-09

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

e.g.

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

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

  • 在侧面的三个过滤器菜单中单击哪些标签
  • 在顶部的搜索菜单栏中输入什么搜索词
  • 选定的分页页面,位于底部

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

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

关于如何解决这个问题有什么想法吗?看起来是一个相当普遍的问题吗?

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

请帮忙!

提前谢谢了。

Sachin

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


您只需将数据保存在用户设备中即可做到这一点。您可以通过使用 cookie 或 localStorage 来完成此操作。我更喜欢 localStorage,因为用户可以轻松拒绝 cookie。 像这样-

localStorage.setItem("tags",tagItemsInAnArray);

然后localStorage.getItem("tags");

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

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

  • React-Redux:state.setIn() 和 state.set() 有什么区别?

    我见过使用setIn and set 在一些react redux代码中 state setIn state set 我在这里找到了一些文档https facebook github io immutable js https facebo
  • Bootstrap按钮加载+Ajax

    我正在使用 Twitter Bootstrap 的按钮加载状态 http twitter github com bootstrap javascript html buttons http twitter github com bootst
  • 有没有办法使用 Rspec/Capybara/Selenium 将 javascript console.errors 打印到终端?

    当我运行 rspec 时 是否可以让 capybara selenium 向 rspec 报告任何 javascript console errors 和其他异常 我有一大堆测试失败 但当我手动测试它时 我的应用程序正在运行 如果不知道仅在
  • 如何纠正流警告:解构(缺少注释)

    我正在编写一个小型 React Native 应用程序 并且正在尝试使用 Flow 但我无法在任何地方真正获得有关它的正确教程 我不断收到错误 destructuring Missing annotation 有关 station 这段代码
  • 调整图像大小并将画布旋转 90 度

    这里有很多关于在 js 上使用画布旋转图像的主题 我阅读了其中的大部分内容 但无法找到解决我的问题的方法 我正在接收任何分辨率的图像 来自上传组件 我将其大小调整为 1024x768 如下所示 var canvas document cre
  • Jquery 数据表列总和

    我只是参考一下这个链接 https datatables net examples advanced init footer callback html了解如何获取 jquery 数据表中的列总计 但我已经完成了一半的项目 我在html页面
  • Chrome 扩展程序在代码中使用 client_secret

    我正在开发具有自己的 oAuth 授权的 Google Chrome 扩展 当然 我必须使用 client id 和 client secret 作为请求令牌 有什么办法可以向用户隐藏这些数据吗 由于此请求只是 javascript 源代码
  • 网站的主体和元素固定在 980px 宽度上,不会缩小

    我试图在 Rails 应用程序顶部启动前端 仅 HTML CSS 页面 但在使用 320px 视口时遇到问题 有些元素不会按比例缩小 我不明白为什么 我已经完成了检查元素 为各种元素提供了max width 100 and or width
  • 检查 jQuery 1.7 中是否存在基于文本的选择选项

    所以我有以下 HTML 片段
  • 刷新页面时保存用户的选择

    我目前有一个页面显示不同团队的数据 我有一些数据 用户可以单击使其处于 打开 或 关闭 状态 并为每个数据显示不同的图标 它基本上就像一个清单 只是没有物理复选框 我想记住哪些 复选框 已被选中 即使在用户刷新页面或关闭浏览器并稍后返回之后
  • DataTables row.add 到特定索引

    我正在替换这样的行项目 var targetRow entity row dataTable targetRow closest table dataTable DataTable dataTable row targetRow remov
  • 页面上使用 HTML Editor Extender 进行回发会导致 IE11 中出现 JavaScript 错误

    我已将 HTML 编辑器扩展程序添加到我正在处理的页面中 现在每当我在页面上发回帖子时 都会收到以下 Javascript 错误 JavaScript 运行时错误 参数无效 之后什么也没有发生 这在 IE10 或更低版本以及我所知道的所有其
  • 图像背景不透明度不影响边框

    如何设置背景不透明度而不影响边框线不透明度 我找到的解决方案没有帮助 div class selected img src assets img image product 1 thumbnail jpg alt product 1 thu
  • 可以设置标题样式吗? (并且使用CSS或js?)[重复]

    这个问题在这里已经有答案了 我想知道是否可以设计一个title a href title This is a title Hello a 样式问题有两个方面 文本格式 编码 我猜这是可能的 所以在问题中这样做 工具提示样式 你能把它弄大一点
  • 日期出现奇怪的错误,“未捕获非法访问”

    所以我试图找到最新的DateJavascript 可以处理 我把它减少到 9 月 275760 并增加了我开始捕获未捕获的天数illegal access例外new Date 09 24 275760 to new Date 10 13 2
  • 在 HTML 下拉列表中有一个滚动条

    我正在寻找一种在 HTML 的下拉列表中添加滚动条的方法 这样如果下拉列表包含的内容超过例如 5 项 将出现滚动条以查看其余项 这是因为我将被迫列出一些大清单 过去几个小时我一直在谷歌上搜索它 但没有运气 它需要适用于 IE8 FF 和 C
  • 使用css bootstrap时如何仅向一列添加右边框?

    我正在尝试使用CSS引导框架 http getbootstrap com css tables在我的项目中 我正在使用带有以下类的表table table bordered table striped 我想删除除第一列之外的所有列的边框 这
  • 如何用另一个响应替换窗口的 URL 哈希?

    我正在尝试使用替换方法更改哈希 URL document location hash 但它不起作用 function var anchor document location hash this returns me a string va
  • 从 FileReader 设置背景图像样式

    我正在寻找一种解决方案 允许我从文件上传输入中获取文件并通过设置 document body style backgroundImage 来预览它 以下代码用于在 Image 元素中显示预览 function setImage id tar
  • JavaScript 相对路径

    在第一个 html 文件中 我使用了一个变量类别链接 var categoryLinks Career prospects http localhost Landa DirectManagers 511 HelenaChechik Dim0

随机推荐

  • PyQt - 如何打开/关闭拼写检查

    我使用以下内容作为编辑器拼写检查器的基础 我想制作一个自动拼写检查按钮 按下该按钮将使拼写检查器工作 而未按下时 拼写检查器不应突出显示或建议任何内容 您知道类似于 LibreOffice OpenOffice 自动拼写检查工具栏按钮吗 我
  • 可可-Applescript NSOpenPanel?

    我该如何做NSOpenPanel在可可 Applescript 中 有什么好的教程吗 我熟悉 Applescript 但不太熟悉 Cocoa 部分 我需要一个nib对于 NSOpenPanel 我正在做一个自动操作 看我之前的问题 肖恩 斯
  • 如何在对话期间以编程方式将号码输入到 Android 中的电话应用程序屏幕中

    我想通过我的 Android 程序在对话期间以编程方式将号码输入到 Android 手机的电话应用程序中 像这样的操作 1 打开拨号键盘并 2 键入号码 例如 当您拨打该电话号码并且该电话号码有用于呼叫目的地的分机电话号码时 例如 电话号码
  • Tkinter 中 GStreamer 的视频输出?

    有谁知道我将如何使用 tkinter 窗口作为 python 内的视频接收器 管道的输出 我已经找到了许多其他 GUI 系统的方法 但我不想必须同时使用 tkinter 和其他东西 xxx 预先感谢 x 这对我在 Windows 32 位上
  • 对象必须实现 IConvertible

    对象必须实现 IConvertible 描述 执行当前 Web 请求期间发生未处理的异常 请查看堆栈跟踪以获取有关错误及其在代码中的来源的更多信息 异常详细信息 System InvalidCastException 对象必须实现 I敞篷车
  • 如何在Python中将文本中每个句子的开头大写? [复制]

    这个问题在这里已经有答案了 我想创建一个函数 将一个文本字符串作为输入 并且我想将标点符号后面的每个字母大写 问题是 字符串不像列表那样工作 所以我真的不知道该怎么做 我尝试这样做 但它似乎不起作用 def capitalize strin
  • iOS相机焦点值

    有什么办法可以从具有自动对焦功能的 iPhone 相机中获取焦点值吗 我想使用这些数据来计算 iPhone 到焦点对象的距离 显然这是一个老问题 但由于自 iOS8 以来有一个获取 镜头值 的选项 它应该出现在这里 从iOS 8开始你可以通
  • cx_Freeze 错误:resource_filename() 仅支持 .egg,不支持 .zip

    我有一个完全工作的基于 wxpython 的应用程序 全部用 Python 编写 我想制作一个exe 所以我使用了cxFreeze 在构建过程中 有许多模块似乎丢失了 有时这应该不会造成问题 但是当我运行应用程序时 它给了我来自 MySQL
  • 函数隐藏和重载的区别

    我找不到函数隐藏和重载之间的任何区别 由于函数隐藏是派生类中存在的函数并隐藏基类的函数 两者的函数名称相同 重载 派生类和基类具有相同的名称但不同的签名 class A void print int class B public A voi
  • ant build 中使用 aapt 进行紧缩/资源打包使用其他项目的缓存

    我有两个使用通用库的 Android 应用程序 每个项目都为启动屏幕和其他一些项目定义了自己的背景图像 这些图像在两个应用程序中具有相同的名称 当我从 Eclipse 构建 运行时 每个应用程序都使用正确的背景图像 但是 当我运行 ant
  • jqueryposition() 在 safari 和 chrome 中无法正常工作

    我以前曾见过这个问题一两次 但从未有过适用于我的问题的答案 据我所知 我有一个单击链接时出现的工具提示 我根据链接的位置设置工具提示的位置 如下所示 tooltip css left this position left 这在 FF IE
  • 比较两个数组并用第三个数组中的值替换重复项

    var array1 a b c d var array2 a v n d i f var array3 1 2 3 4 5 6 刚开始学习Javascript 我不知道如何比较array2给那些在array1如果是这样 请将其替换为相应的
  • 一个简单的 SQL Select 查询来抓取社交图中所有有联系的人?

    爬取社交图谱的最短或最快的 SQL 选择查询或 SQL 过程是什么 想象一下我们有这张表 UId FriendId 1 2 2 1 2 4 1 3 5 7 7 5 7 8 5 9 9 7 我们这里有两个人 我正在谈论一个 sql 查询或过程
  • 嵌入式 Python 无法使用 NumPy 指向 Python35.zip - 如何修复?

    好的 这是来自 Python 网站的基本示例 用于简单说明runpy exe运行下面的 Python 脚本 引用 Python 包含并链接到后 在 x64 Windows 上使用 Visual Studio 2015 可以正常工作pytho
  • Spring Data mongodb-复制集合

    我将 spring 数据与 mongodb 一起使用 我想使用代码而不是命令行将文档从一个集合复制到另一个集合 有没有办法在不循环所有文档并执行 插入 的情况下执行此操作 除非像这样的命令一样使用它 mongoTemplate execut
  • 错误:超时间隔必须小于 2^32-2。参数名称: dueTm

    我的班级模型中有一对多关系 例子 单个角色可以附加多个权限 因此有两张表 一张来自角色 一张用于每个角色的权限 现在我有一个角色类 该角色类又具有作为该类成员的权限列表 当我需要进行更新时 我实例化一个transactionscope对象
  • 将文本添加到 div(或其他元素)的底部 - 模拟聊天控制台

    我有一个 div 应该在文本输入到输入框中时收集文本 现在它只是重现输入 但稍后它应该产生半智能响应 我希望文本出现在 div 的底部 渐变的暗端 我希望新文本始终位于底部 旧文本始终位于上部滚动区域的灰色区域 In other words
  • WPF 样式设置器不工作

    我有一个包含组合框的自定义用户控件 我添加了一个 ComboBoxWidth 依赖属性 以允许开发人员根据需要设置宽度 使用样式设置器 我想将所有这些组合框的宽度设置为另一个用户控件上的相同值 以保持大小一致性 但是 它不起作用 如果我在每
  • 在 Visual Basic 2010 中使用变量字符串引用对象

    我的表单上有几组类似的对象 标签 进度条 Windows 上的 Visual Basic 2010 在我的代码中 我有包含数据的集合 需要将其推入每个集合的值 文本属性中 我想要一个类似于 PHP 的解决方案 因为我可以分配类似于以下的值
  • 导航回具有相同状态的搜索页面 (JavaScript)

    当用户单击搜索结果但随后返回主搜索页面时 如何使用 JavaScript 保留搜索页面的状态 e g HTML https startech enterprises github io docs guides data analytics