I am familiar with several approaches to making the back button work in AJAX applications in various situations, but I have not found a solution that will work gracefully in my specific scenario.
我熟悉在各种情况下使后退按钮在AJAX应用程序中工作的几种方法,但我还没有找到一种能够在我的特定场景中优雅地工作的解决方案。
The pages I am working with are the search interface for a site. You enter terms in a normal search box, click "go and wind up at a search results page. On the search results page there are a ton of UI controls for filtering/sorting the search results to find what you are looking for. Some of the operations triggered by these controls may take a (relatively) long time to complete (e.g. several seconds).
我正在使用的页面是网站的搜索界面。您可以在普通搜索框中输入术语,单击“转到搜索结果页面”。在搜索结果页面上有大量用于过滤/排序搜索结果的UI控件,以查找您要查找的内容。由这些控制触发的操作可能需要(相对)长的时间来完成(例如几秒)。
This latency is fine in case where the user is initially filtering/sorting their results... there's a nice AJAX spinner and so on... however when the user clicks on a search result and then clicks on the BACK button, I would like the page to instantly be restored to the state it was in when they clicked through.
如果用户最初过滤/排序结果,这种延迟很好......有一个很好的AJAX微调器等等......但是当用户点击搜索结果然后点击“返回”按钮时,我希望页面立即恢复到他们点击时所处的状态。
I can restore the states using IFRAMEs/fragment identifiers as a dictionary of page history, but what ends up happening is that when the user first hits the back button the initial page is loaded, then it (re) makes the AJAX query to get the page state back, which triggers the AJAX spinner and another wait of possible several seconds.
我可以使用IFRAME /片段标识符作为页面历史的字典来恢复状态,但最终发生的是当用户第一次点击后退按钮时加载初始页面,然后它(重新)使AJAX查询得到页面状态返回,触发AJAX微调器和另一次可能的几秒钟等待。
Is there any approach that does not require this kind of two-stage load of the page when the user returns to the page via the BACK button?
当用户通过BACK按钮返回页面时,是否有任何方法不需要页面的这种两阶段加载?
Edited to add: I am partial to jquery but I'd be happy with solutions that depend on other libraries/toolkits or that are standalone/raw javascript.
编辑添加:我偏爱jquery,但我很高兴依赖于其他库/工具包或独立/原始javascript的解决方案。
Edited to add: I should've added that I'm trying to avoid cookies/sessions because this prevents people having multiple brower windows/tabs open and manipulating different sets of search results at the same time.
编辑添加:我应该补充说我正在尝试避免cookie /会话,因为这可以防止人们打开多个浏览器窗口/标签并同时操作不同的搜索结果集。
Edit: Matt, can you elaborate on your proposed solution (triggering a page change event via fragment identifer)? I see how this would help with BACK button clicks across the same page but not coming BACK to the search results page after clicking on a specific result.
编辑:马特,你能详细说明你提出的解决方案(通过片段标识触发页面更改事件)吗?我看到这有助于在同一页面上单击BACK按钮,但在单击特定结果后不返回搜索结果页面。
6 个解决方案
#1
0
Try to use localStorage object. Here is crossbrower libs jStorage and WEBSHIMS json-storage
尝试使用localStorage对象。这是crossbrower libs jStorage和WEBSHIMS json-storage
#2
1
Just use a cookie.
只需使用cookie。
#4
0
Would it help to trigger a page change event using the "Add some info to the # at the end of the URL approach".
使用“在URL方法结尾处向#添加一些信息”来触发页面更改事件是否有帮助?
That way, clicking the back button shouldn't actually change the page, and you should be able to restore state without the first page load.
这样,单击后退按钮不应该实际更改页面,并且您应该能够在没有第一页加载的情况下恢复状态。
#5
0
Use something persistent that is tied to the user's profile.
使用与用户个人资料相关的持久性内容。
Cookies and sessions are good ideas, but you can also keep those stuff in the database. That gives you an added advantage of being able to save the user's filtering preferences accross different browsing session.(if, for exampple, he was looking for something in the office and then decided to continue searching when he is back at home).
Cookie和会话是很好的想法,但您也可以将这些内容保存在数据库中。这为您提供了额外的优势,即能够在不同的浏览会话中保存用户的过滤首选项。(例如,如果他在办公室寻找某些东西,然后决定在他回到家时继续搜索)。
It all depends on the complexity of the filters and weather or not it is something you think that the user will want to use accross diffrent browsing sessions..
这一切都取决于过滤器和天气的复杂性,或者不是你认为用户想要在不同的浏览会话中使用它。
#6
0
Edited to add: I should've added that I'm trying to avoid cookies/sessions because this prevents people having multiple brower windows/tabs open and manipulating different sets of search results at the same time.
编辑添加:我应该补充说我正在尝试避免cookie /会话,因为这可以防止人们打开多个浏览器窗口/标签并同时操作不同的搜索结果集。
You can create a random token and assign it to the fragment identifier.
您可以创建随机令牌并将其分配给片段标识符。
- on first page load create a token if no fragment identifier is set
- before navigating out, store all the temporary ajax data in a cookie with that token as index.
- when hitting back, if you have a fragment identifier set, load the data from the corresponding token in the cookie.
- you can even add a "time" field to expire tokens, etc...
在第一页上加载如果没有设置片段标识符,则创建一个令牌
在导航之前,将所有临时ajax数据存储在cookie中,并将该令牌作为索引。
回击时,如果设置了片段标识符,则从cookie中的相应标记加载数据。
你甚至可以添加一个“时间”字段来过期令牌等...
sample cookie (JSON):
示例cookie(JSON):
{"ajaxcache":[{"token":<token>,"time":<time>,"data":<data>}, ... ]}
#1
0
Try to use localStorage object. Here is crossbrower libs jStorage and WEBSHIMS json-storage
尝试使用localStorage对象。这是crossbrower libs jStorage和WEBSHIMS json-storage
#2
1
Just use a cookie.
只需使用cookie。
#3
#4
0
Would it help to trigger a page change event using the "Add some info to the # at the end of the URL approach".
使用“在URL方法结尾处向#添加一些信息”来触发页面更改事件是否有帮助?
That way, clicking the back button shouldn't actually change the page, and you should be able to restore state without the first page load.
这样,单击后退按钮不应该实际更改页面,并且您应该能够在没有第一页加载的情况下恢复状态。
#5
0
Use something persistent that is tied to the user's profile.
使用与用户个人资料相关的持久性内容。
Cookies and sessions are good ideas, but you can also keep those stuff in the database. That gives you an added advantage of being able to save the user's filtering preferences accross different browsing session.(if, for exampple, he was looking for something in the office and then decided to continue searching when he is back at home).
Cookie和会话是很好的想法,但您也可以将这些内容保存在数据库中。这为您提供了额外的优势,即能够在不同的浏览会话中保存用户的过滤首选项。(例如,如果他在办公室寻找某些东西,然后决定在他回到家时继续搜索)。
It all depends on the complexity of the filters and weather or not it is something you think that the user will want to use accross diffrent browsing sessions..
这一切都取决于过滤器和天气的复杂性,或者不是你认为用户想要在不同的浏览会话中使用它。
#6
0
Edited to add: I should've added that I'm trying to avoid cookies/sessions because this prevents people having multiple brower windows/tabs open and manipulating different sets of search results at the same time.
编辑添加:我应该补充说我正在尝试避免cookie /会话,因为这可以防止人们打开多个浏览器窗口/标签并同时操作不同的搜索结果集。
You can create a random token and assign it to the fragment identifier.
您可以创建随机令牌并将其分配给片段标识符。
- on first page load create a token if no fragment identifier is set
- before navigating out, store all the temporary ajax data in a cookie with that token as index.
- when hitting back, if you have a fragment identifier set, load the data from the corresponding token in the cookie.
- you can even add a "time" field to expire tokens, etc...
在第一页上加载如果没有设置片段标识符,则创建一个令牌
在导航之前,将所有临时ajax数据存储在cookie中,并将该令牌作为索引。
回击时,如果设置了片段标识符,则从cookie中的相应标记加载数据。
你甚至可以添加一个“时间”字段来过期令牌等...
sample cookie (JSON):
示例cookie(JSON):
{"ajaxcache":[{"token":<token>,"time":<time>,"data":<data>}, ... ]}