我正在尝试检测我的当前页面是从缓存中加载还是新副本。
我在我的 body 标签上注册了 onPageShow 回调。我可以看到它被触发，但我无法产生 event.persisted 实际上是真的情况。
我什至将 Firefox 置于离线模式，我看到响应是从网络选项卡上的缓存中获取的，但 event.persisted 仍然是错误的。
问问题
910 次
5 回答
5
嗯，我可以确认var isCached = performance.getEntriesByType("navigation")[0].transferSize === 0;这确实适用于 Chrome。值得一试。也正如其他人所建议的那样，您可能想看看这个示例如何使用 JavaScript 来检测我是否在缓存页面上
于 2019-03-05T09:20:00.053 回答
3
IE11 有window.performance.getEntriesByType('navigation')但没有transferSize. connectEnd但是，如果页面来自浏览器缓存，它似乎会被忽略。
扩展@subhendu-kundu 的答案，这也应该适用于 IE11
<script>
window.addEventListener('pageshow', function(event) {
if (window.performance) {
var navEntries = window.performance.getEntriesByType('navigation');
if (navEntries.length > 0 && typeof navEntries[0].transferSize !== 'undefined') {
if (navEntries[0].transferSize === 0) {
// From cache
}
} else if (navEntries.length > 0) {
// IE11 seems to leave this completely if loaded from bfCache
if (!navEntries[0].connectEnd) {
// From cache
}
}
}
});
</script>
于 2019-03-07T15:07:59.683 回答
3
来自谷歌图书
这在 Mozilla 中完美运行。
试试下面的代码
<meta http-equiv="Cache-control" content="public">
...
<body onpageshow="onShow(event)" onpagehide="onHide(event)">
<div >
<a href='/new.html' >Next page</a>
</div>
<script>
function onShow(event) {
if (event.persisted) {
alert('Persisted...');
}
}
function onHide(event) {
if(event.persisted) {
alert("Persisted")
}
}
</script>
</body>
在 new.html 中添加任何代码。空白页也可以
然后用浏览器回来。你会得到持续的警报
注意： 使用域或 ngrok 。缓存在本地不工作 重新加载不会触发持久化。我只尝试了页面显示/隐藏
我正在跳过寻找缓存的替代答案
于 2019-03-05T09:38:26.833 回答
-1
好吧，我可以建议禁用浏览器中的缓存并检查获取的代码块的大小。同样，您可以从浏览器本身禁用缓存..（我只是建议我的观点）。
于 2019-03-05T09:08:16.407 回答
-1
我不知道我是否正确理解了您的问题，您想检查加载的页面是来自磁盘/内存缓存还是新页面。如果我理解错了，请在下面评论。
我正在尝试检测我的当前页面是从缓存中加载还是新副本。
为此，您可以打开浏览器的开发人员工具并检查网络选项卡，如果页面是从缓存加载的，它将显示指示（来自缓存）。
Chrome 支持开箱即用，但对于火狐，我认为你应该安装 web-developer 插件：https ://addons.mozilla.org/en-US/firefox/addon/web-developer/
于 2019-03-05T09:19:29.617 回答