如何'取消缓存'当用户离开页面时，ajax加载了html

How to 'un-cache' ajax-loaded html when user leaves page

本文关键字：ajax html 加载离开缓存取消用户如何更新时间：2023-09-26

现在，当用户点击我网站上的链接时，我使用ajax只替换主框架中的内容（标题和侧边栏需要保持页面之间的状态，所以我不想重新加载它们）。我使用pushState和popState来更改url栏。

我明确地不缓存ajax内容，我的网站运行良好——但感觉有点太慢了，尤其是在"back"命令上。

如果我缓存了xhr-html请求，那么该网站内部运行良好。但是，如果用户输入一个新的URL并离开网站，如果他/她点击"返回"命令，则只会从缓存中提取未格式化的、没有标题和侧栏的主视图内容，网站将无法正常显示。

有没有什么方法可以让我在内部进行缓存，但在用户离开页面时刷新缓存？

我想我现在明白你的描述了。

当我在你的网站上访问/page1.html时，下载的html有主内容+标题+侧边栏。当我点击链接访问/page2.html时，AJAX加载页面，下载的html只有主要内容。

因此，此时缓存包含一个完整的/page1.html和一个部分的/page2.html

现在，当我离开你的网站，然后点击后退按钮返回时，浏览器会从缓存中抓取/page2.html。但这只是一个部分页面，你的网站"崩溃"了。

理想情况下，您希望浏览器只在使用XMLHttpRequest请求时获取部分内容。此外，如果部分页面和完整页面都可以缓存，那就太好了。

pjax通过向AJAX请求中的URL查询添加_pjax=true参数来解决这个问题。我认为这应该在大多数情况下都有效。

请注意，您不会将此参数添加到传递给pushState()的URL中。

另一种选择是始终下载完整页面，然后在使用AJAX时提取#main-view。

当然，您可以通过切换到PJAX来解决其他人的问题（您需要使用fragment选项）。

另一个为您处理pushState（）的JS库是我的HTMLDecor项目。使用HTMLDecor，您的页面只包含主要内容+一个<link>到另一个（可能是共享的）包含页眉/页脚/侧边栏的HTML页面。HTMLDecor从浏览器中将这些内容添加到页面中。当用户点击链接浏览到另一个页面时，HTMLDecor使用AJAX和pushState，无需配置。当然，如果浏览器不支持pushState，则会出现正常的链接导航。