我的web应用程序通过JavaScript异步呈现。问题是,浏览器缓存一个版本的页面,然后当我操作DOM不更新缓存。然后,当我点击后退或前进按钮,浏览器加载网页,这不是最终版本的缓存版本。
我的补丁是强制页面重载每当popstate事件触发。
window.addEventListener('popstate', () => window.location.reload())
但是,该解决方案显著减慢页面加载。
我想知道如果有一种方法强制浏览器缓存更新,每当我操作DOM。就像是:
window.location.forceCacheUpdate()
我希望能够在不重新加载整个页面来更新缓存。
您可以存储更新HTML内sessionStorage
然后在load
的window
事件或本地存储的HTML代替静态的HTML请求体导航时出现,例如
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="div"></div>
<script>
onload = () => {
console.log(sessionStorage);
const div = document.getElementById("div");
if (sessionStorage.getItem('html') === null) {
div.innerHTML = '<p>1</p>';
sessionStorage.setItem('html', encodeURIComponent(div.innerHTML));
setTimeout(() => { console.log('navigate'); history.back() }, 2000)
} else {
div.innerHTML = decodeURIComponent(sessionStorage.getItem('html'));
}
// do stuff
}
</script>
</body>
</html>
您也可以利用History interface或ServiceWorker
ServiceWorker
Chrome extension: Block page items before access。
见Persist variables between page loads的范围内,用于存储window
负载之间的数据解决方案。