如何使用JavaScript来检测我是否在缓存页面上

I want to display from cache for a long time and I want a slightly different behavior on page render vs loading the page from cache. Is there an easy way I can determine this with JavaScript?

我想从缓存中显示很长一段时间,我希望页面渲染与从缓存加载页面略有不同。有一种简单的方法可以用JavaScript来确定吗?

6 个解决方案

#1

One way you could do it is to include the time the page was generated in the page and then use some javascript to compare the local time to the time the page was generated. If the time is different by a threshold then the page has come from a cache. The problem with that is if the client machine has its time set incorrectly, although you could get around this by making the client include its current system time in the request to generate the page and then send that value back to the client.

您可以这样做的一种方法是在页面中包含页面生成的时间,然后使用一些javascript将本地时间与页面生成时间进行比较。如果时间与阈值不同,则页面来自缓存。问题是如果客户端计算机的时间设置不正确,尽管您可以通过使客户端在请求中包含其当前系统时间来生成页面然后将该值发送回客户端来解决此问题。

#2

I started with the answer "Daniel" gave above but I fear that over a slow connection I could run into some latency issues.

我从上面给出的答案“丹尼尔”开始,但我担心,由于连接速度慢,我可能遇到一些延迟问题。

Here is the solution that ultimately worked for me. On the server side I add a cookie refCount and set it's value to 0. On document load in java script I first check refCount and then increment it. When checking if refCount is greater than 1 I know the page is cached. So for this works like a charm.

这是最终对我有用的解决方案。在服务器端,我添加一个cookie refCount并将其值设置为0.在java脚本中的文档加载时,我首先检查refCount然后递增它。检查refCount是否大于1时,我知道页面已缓存。所以对于这个工作就像一个魅力。

Thanks guys for leading me to this solution.

谢谢大家带领我这个解决方案。

#3

While this question is already 4 years old. I thought I would add my 2 cents using jQuery and the History plugin.

虽然这个问题已经有4年了。我以为我会使用jQuery和History插件添加2美分。

$(document).ready(function()
{
    $('body').append('<div class="is_cached"></div>');
});

History.Adapter.bind(window,'statechange',function(){
   if($('.is_cached').length >= 1)
   {
      alert('this page is cached');
   }
});

When the document is first loaded. A new div.is_cached is appended. There isn't a compatible way to execute javascript when loading a cached page, but you can monitor for history changes. When history changes and the div.is_cached exists, then the user is viewing a cached paged.

首次加载文档时。附加一个新的div.is_cached。加载缓存页面时没有兼容的方法来执行javascript,但您可以监视历史记录更改。当历史记录更改且div.is_cached存在时,则用户正在查看缓存的分页。

#4

Using XmlHttpRequest you can pull up the current page and then examine the http headers of the response.

使用XmlHttpRequest,您可以拉出当前页面,然后检查响应的http标头。

Best case is to just do a HEAD request and then examine the headers.

最好的情况是只做一个HEAD请求,然后检查标题。

For some examples of doing this have a look at http://www.jibbering.com/2002/4/httprequest.html

有关这方面的一些示例,请查看http://www.jibbering.com/2002/4/httprequest.html

#5

With the new Resource Timing Level 2 spec you can use the transfer size property to check if the page is loaded from cache:

使用新的资源计时级别2规范,您可以使用传输大小属性来检查页面是否从缓存加载:

var isCached = performance.getEntriesByType("navigation")[0].transferSize === 0;

Spec: https://www.w3.org/TR/resource-timing-2/#dom-performanceresourcetiming-transfersize
Browser support: https://developer.mozilla.org/en-US/docs/Web/API/PerformanceNavigationTiming#Browser_compatibility
- note that at the time of writing, it shows Safari does not support while in actuality the latest version does.

浏览器支持:https://developer.mozilla.org/en-US/docs/Web/API/PerformanceNavigationTiming#Browser_compatibility注意,在撰写本文时,它显示Safari不支持,而实际上最新版本支持。

#6

Not directly, some browsers may have some custom command for it.

不是直接的,一些浏览器可能有一些自定义命令。

There is a workaround that would do what you want. Use a cookie to store timestamp of the first visit and then use the META HTTP-EQUIV to set the length of time the file is cached (cacheLength). If the current time is within the time period from timestamp to timestamp+cacheLength then treat as if they loaded from cache. Once the cache has expired reset the cookie time.

有一种解决方法可以满足您的需求。使用cookie存储第一次访问的时间戳,然后使用META HTTP-EQUIV设置文件缓存的时间长度(cacheLength)。如果当前时间在从时间戳到时间戳+ cacheLength的时间段内,则将其视为从缓存加载。缓存过期后重置cookie时间。

#1

#2