Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/386.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181

Warning: file_get_contents(/data/phpspider/zhask/data//catemap/5/fortran/2.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 单击浏览器后退按钮时如何保持页面状态?_Javascript_Jquery_Back Button - Fatal编程技术网

Javascript 单击浏览器后退按钮时如何保持页面状态?

Javascript 单击浏览器后退按钮时如何保持页面状态?,javascript,jquery,back-button,Javascript,Jquery,Back Button,我有一个客户端分页和过滤页面。该页面列出了大约200-300种产品。 该页面包含一些过滤器,如类别、制造商和重量。 单击任意页码或过滤器,我正在使用Jquery在客户端操作页面内容 直到这一步,一切都很顺利。现在我面临一个用例问题 假设一个用户来到我们的产品列表页面,点击一些过滤器,得到一个产品列表 现在他点击一个特定的产品,这会将他重定向到产品页面以查看产品的详细信息 但是现在,当用户单击后退按钮时,用户将获得初始状态的页面,而不选择任何过滤器 用户是否可以通过单击“上一步”按钮获得之前选择的

我有一个客户端分页和过滤页面。该页面列出了大约200-300种产品。 该页面包含一些过滤器,如类别、制造商和重量。 单击任意页码或过滤器,我正在使用Jquery在客户端操作页面内容

直到这一步,一切都很顺利。现在我面临一个用例问题

  • 假设一个用户来到我们的产品列表页面,点击一些过滤器,得到一个产品列表
  • 现在他点击一个特定的产品,这会将他重定向到产品页面以查看产品的详细信息
  • 但是现在,当用户单击后退按钮时,用户将获得初始状态的页面,而不选择任何过滤器

  • 用户是否可以通过单击“上一步”按钮获得之前选择的过滤器页面?

    您可以使用以下方法跨多个页面存储数据

  • 将数据存储在中
  • 将数据存储在中
  • 将数据存储在服务器上的中
  • 将数据作为URL的一部分(使用或作为筛选参数)。请注意,更改查询字符串会导致页面重新加载

  • 如果使用cookie、本地存储或散列,则需要向页面添加JavaScript代码,以便在页面加载时加载并应用存储的数据。

    有多种方法可以做到这一点:

  • 如果您处理的是html5历史记录和单页应用程序,那么您就不会重新加载页面。但根据你的问题,我想这不是你要处理的
  • 在URL中存储一些内容。举个例子,看看TotalHockey上的过滤器,例如,当你向后看时,URL包含整个状态
  • 如果您有支持本地存储的浏览器,请使用本地存储
  • 将cookie与$.cookie API一起使用
  • 将其存储在服务器中的会话中

  • 您可以在提交过滤器输入后将搜索过滤器数据存储在会话中,在每个ajax请求(加载产品列表)中,您可以检查存储在会话中的搜索过滤器输入,并根据它们显示数据。如果搜索会话为空,则显示整个列表


    您还可以在搜索记录后在会话中存储完整的ajax请求URL(如果使用了GET方法),并在从产品详细信息页面返回后再次点击该URL。

    将状态存储在服务中,检查控制器初始化时的状态您所说的面包屑可以在应用程序的后端部分完成,但也可以使用本地存储。提供过滤器的html以获得进一步帮助。在此上下文中,您所说的“服务”是什么意思?我会将设置存储在cookies@hon2a你和我一定是越界了!很好验证!我也会投你的一票!假设单击一个特定的过滤器(复选框),我会将该值添加到页面url(例如:page.cfm?categoryid=4,5),现在我需要检查document.ready上的这些url变量,并通过jquery触发这些过滤器?我说得对吗?它可以只使用jquery来完成,或者我需要使用历史API。我对历史API一无所知。比如说,单击一个特定的过滤器(复选框),我会将该值添加到页面url(例如:page.cfm?categoryid=4,5),现在我需要检查document.ready上的这些url变量,并通过jquery触发这些过滤器?我说的对吗?对。但我会将此选项移到列表的底部,因为它会导致在每个过滤器选择上重新加载页面。如果你的应用程序纯粹是基于客户端的,我建议使用cookie或本地存储。在不刷新页面的情况下,是否不可能在筛选器选择的url上附加筛选器。实际上是这样的。你只需要使用URL的
    散列
    部分,而不是查询字符串。我的过滤完全是客户端的。我不需要在选择过滤器时进行任何ajax调用。我只是隐藏了与筛选条件不匹配的产品。比如说,如果我在选择筛选时将筛选值存储在cookie中,单击“上一步”按钮,我需要检查文档中的那些cookie。准备好并手动触发筛选了吗?我走的方向正确吗?