我正在尝试检测我的当前页面是从缓存中加载还是新副本。
我在我的 body 标签上注册了 onPageShow 回调。 我可以看到它被触发，但我无法产生 event.persisted 实际上为真的情况。
我什至将 firefox 置于离线模式，我看到响应正在从网络选项卡上的缓存中获取，但 event.persisted 仍然是错误的。
【问题讨论】：
onpageshow 事件，然后单击某个链接以在同一选项卡中打开另一个页面，然后导航回原始页面。会火吗？
标签： javascript pageshow
嗯，我可以确认 var isCached = performance.getEntriesByType("navigation")[0].transferSize === 0; 这确实适用于 Chrome。值得一试。
也正如其他人建议的那样，您可能想看看这个例子How can I use JavaScript to detect if I am on a cached page
【讨论】：
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>
【讨论】：
来自谷歌图书
这在 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 。缓存在本地不起作用 重新加载不会触发持续存在。我只尝试了页面显示/隐藏
我正在跳过是否找到缓存的替代答案
【讨论】：
我不知道我是否正确理解了您的问题，您想检查加载的页面是来自磁盘/内存缓存还是新页面。如果我理解错了请在下方评论。
我正在尝试检测我的当前页面是从缓存中加载还是 新副本。
为此，您可以打开浏览器的开发人员工具并检查网络选项卡，如果页面是从缓存加载的，它将显示指示（来自缓存）。
Chrome 开箱即用，但对于火狐，我认为你应该安装 web-developer 插件：https://addons.mozilla.org/en-US/firefox/addon/web-developer/
【讨论】：