如何使用 JavaScript 清除缓存?
缓存，通常称为缓存，是计算机中的一种不同的内存系统，用于在短时间内存储常用数据和指令。在加载网站时，我们使用的浏览器会自动缓存一些资源，例如图像、脚本和样式表，以便在重新加载页面时再次使用。这不仅可以缩短网站加载所需的时间，还有助于减少必须通过网络发送的数据量。但是浏览器存储的这种缓存也有一些缺点。如果缓存的资源过期或浏览器由于使用缓存的资源而无法重新加载页面，则可能会出现困难。为此，我们有时必须清除这些缓存。
用户可以根据需要使用 JavaScript 清除浏览器的缓存。这些内容如下所述 -
location.reload() 方法 - 可用于重新加载当前页面并禁用缓存的有效方法之一。用户必须提供一个布尔值作为参数，并且该值应设置为 true。此技术不会使用缓存版本，而是强制浏览器从服务器重新加载所有资源。
navigator.serviceWorker.getRegistrations() 方法 - 这是另一种方法，在使用 navigator.serviceWorker 对象的 getRegistrations() 方法检索所有服务工作者注册后，为每个注册运行 unregister 方法。然后，浏览器将删除其 HTTP 缓存。
caches.open() 和 cache.delete() 方法 − 此方法使用 Cache API 打开命名缓存，然后使用 delete() 方法从缓存中删除特定资源
localStorage.clear() 和 sessionStorage.clear() 方法 − 要从 localStorage 对象中删除所有键值对，用户可以使用 localStorage.clear() 方法。而 sessionStorage.clear() 函数可以从 sessionStorage 对象中删除所有键值对。
使用 location.reload() 方法
当布尔参数设置为 true 时，location.reload() 方法不会缓存当前页面，而是重新加载它。如果指定 true 作为参数，浏览器将直接从服务器下载所有资源(包括图片和脚本)，而不是使用缓存副本。
语法
location.reload(true);
在上述语法中，location 是 JavaScript 的全局对象，重新加载 location 的方法。
示例
在此示例中，我们使用 location.reload() 方法使用 JavaScript 清除缓存。我们使用按钮"清除缓存"并将其与单击事件关联。单击事件处理程序使用参数 true 执行 location.reload() 方法。每当用户单击按钮时，JavaScript 都会强制浏览器重新加载没有缓存文件的网页。
<html>
<body>
<h2>Clearing <i> cache memory </i> using JavaScript</h2>
<div>
<img
id = "myImage"
style = "height: 200px"
src ="https://www.tutorialspoint.com/javascript/images/javascript.jpg"/>
</div>
<button onclick = "clearCache()">Clear cache</button>
<div id = "root" style="padding: 10px; background: #bdf0b8"></div>
<script>
let root = document.getElementById('root')
function clearCache() {
root.innerHTML += 'Cache cleared using location.reload(true)'
windows.location.reload(true)
}
</script>
</body>
</html>
网页显示此消息并快速重新加载最新文件。
使用 navigator.serviceWorker.getRegistrations() 方法
在 JavaScript 中，navigator.serviceWorker.getRegistrations() 方法是用户可以应用的第二种方法，通过取消注册所有服务工作者注册来清除缓存内存，navigator.serviceWorker.getRegistrations() 方法可用于清空浏览器的 HTTP 缓存。一种称为服务工作者的 Web 工作者用于在后台执行许多进程，例如缓存资源。浏览器必须通过停用所有服务工作者注册来清除其 HTTP 缓存。
语法
if ('serviceWorker' in navigator) {
navigator.serviceWorker.getRegistrations()
.then(function(registrations) {
for(let registration of registrations) {
registration.unregister();
}
});
}
在上述语法中，我们检查"serviceWorker"是否在 navigator 对象中可用。然后我们使用 navigator.serviceWorker.getRegistrations() 和 registration.unregister() 方法取消注册服务工作线程。
示例
在此示例中，我们通过使用 JavaScript 取消注册服务工作线程来清除缓存内存。我们使用了"清除缓存"按钮并将其与单击事件关联。单击事件处理程序执行取消注册服务工作线程的函数。navigator.serviceWorker.getRegistrations() 和 registration.unregister() 方法用于取消注册服务工作线程。取消注册后，我们在网页上显示了一条消息。
<html>
<body>
<h2>Clearing <i>cache memory</i> using JavaScript</h2>
<div>
<img id = "myImage" style = "height: 100px" src ="https://www.tutorialspoint.com/images/logo.png" />
</div>
<button onclick = "clearCache()">Clear cache</button>
<div id = "root" style = "padding: 10px; background: #b8f0ea"></div>
<script>
let root = document.getElementById('root')
function clearCache() {
root.innerHTML = 'Cache cleared using navigator.serviceWorker.getRegistrations()'
if ('serviceWorker' in navigator) {
navigator.serviceWorker
.getRegistrations()
.then(function (registrations) {
for (let registration of registrations) {
registration.unregister()
}
})
}
}
</script>
</body>
</html>
清除缓存是最佳做法，但有时也可能影响网页的性能，因为必须再次获取所有文件。JavaScript 可以清除缓存，并根据需要使用缓存。
