![](/img/trans.png)
[英]How to check if a particular resource (e.g. image) is cached by the browser?
[英]How to check if a resource is cached by the browser from Javascript?
有没有办法在不下载资源的情况下检查资源是否被浏览器缓存? 大多数问题和答案都是旧的,我相信现在情况已经发生了变化,并且有更好的方法。
您可以利用fetch
API 及其对应的AbortController
来实现此功能,但有一定的误差(预期的漏报)。
它是这样的,通过附加信号fetch
所需的资源。 在短时间内中止,例如。 4 毫秒。 如果在短时间内返回获取,则它绝对被缓存。 如果提取被中止,它可能没有被缓存。 这是一些代码:
async checkImageCached(url, waitTimeMs = 4) {
const ac = new AbortController()
const cachePromise = fetch(url, {signal: ac.signal})
.then(() => true)
.catch(() => false)
setTimeout(() => ac.abort(), waitTimeMs)
return cachePromise
}
不幸的是,目前仅适用于 Firefox,但另一种选择是使用only-if-cached ,尽管它仅适用于同一来源的请求(因为它也需要mode: 'same-origin'
):
fetch(urlOnSameOrigin, { mode: 'same-origin', cache: 'only-if-cached'})
.then((response) => {
if (response.ok) {
console.log('Cached');
} else if (response.status === 504) {
console.log('Not cached');
}
})
.catch(() => {
console.log('Network error');
});
only-if-cached — 浏览器在其 HTTP 缓存中查找匹配的请求。
如果有匹配项,无论是新鲜的还是陈旧的,都将从缓存中返回。
如果不匹配,浏览器将响应 504 网关超时状态。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.