浏览器缓存和历史后退按钮(散列、history.js)
我的浏览器后退按钮有问题。 IE 和 google chrome 存在问题。 我正在为搜索引擎创建自动加载机制。机制就像谷歌搜索一样。
搭建流程:
1)输入关键词
2)ajax搜索请求
3) 响应为 json
4)使用json构建结果列表
5)将列表附加到容器
如果我已经构建了结果并重定向到另一个页面并返回到包含结果的页面,结果将消失。我尝试了开发人员描述的很多解决方案,例如哈希、history.js 等等,但每一个都不起作用。
I have problem with browser back button. Problem exists for IE and google chrome.
I'm creating autoload mechanism for search engine. Mechanism works like google search.
Procedure of building:
1) typing keywords
2) ajax search request
3) response as json
4) building results list using json
5) append list to container
If i have builded results and redirect to another page and back to the page with results, results desapear. I tried a lot solutions described by developers like hashing, history.js and many more but every one is not working.
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
当您返回时,会从缓存中加载页面的原始 HTML。您通过 Javascript 添加的所有内容都不会被存储,因此您必须在页面加载时恢复该修改。
为此,您可以使用
popstate
事件。当它被触发时,您将需要恢复信息。您可以通过重新执行 AJAX 请求并处理结果来做到这一点。因此,您必须在 url(或哈希)中保存足够的信息,以便能够再次执行相同的请求。这也意味着,您可能需要提前提出请求!例如,如果您执行 ajax 请求来获取列表的项目 X,其中 X 在每次请求后都会递增(这样您就可以在每次单击时获取下一个项目),则需要确保再次加载所有项目。如果不这样做,您将只能获取缓存页面上的原始项目以及 AJAX 处理的最新项目,而中间的项目将会丢失。
但如果您使用
pushState
或replaceState
来存储状态,您还可以存储其他数据。您可以使用它来存储带有状态的 JSON 结果,因此您不需要额外的请求。无论如何,这是一种优化,并不是严格需要的,因此您应该从实现在popstate
上触发的 AJAX 请求开始。无论如何,您都需要它,因为数据可能并不总是与状态一起存储,因此您始终需要 AJAX 请求作为后备。When you go back, the original HTML of the page is loaded from the cache. Everything you added through Javascript is not stored, so you will have to restore that modification on page load.
For that you can use the
popstate
event. When that even is fired, you'll need to restore the information. You can do that by re-executing the AJAX request and process the result. Therefore you must save enough information in the url (or hash) to be able to execute the same request again.That also means, you may need to do earlier requests! For example, if you execute an ajax request to get item X of a list, where X increments each time after the request (so you can get the next item on each click), you will need to make sure that you load all items again. If you don't do that, you will only get the original items on the cached page, and the latest item that was AJAXed, while the items inbetween will be missing.
But if you use
pushState
orreplaceState
to store states, you can also store additional data. You can use this to store the JSON result with the state, so you don't need an additional request. Anyway, this is an optimization and is not strictly needed, so you should start with implementing the AJAX request being fired onpopstate
. You'll need that anyway, because the data may not always be stored with the state, so you will always need the AJAX request as a fallback.