JavaScript 如何清除缓存内存

JavaScript 如何清除缓存内存

缓存内存,通常被称为cache,是计算机中一个不同的内存系统,它可以在短时间内存储经常使用的数据和指令。在加载网站时,我们使用的浏览器会自动缓存一些资源,如图片、脚本和样式表,以便在重新加载页面时再次利用。这可以缩短网站加载的时间,不仅如此,它还有助于降低通过网络发送的数据量。但是,浏览器存储的这种缓冲存储器也有一些缺点。如果缓存的资源过时了,或者浏览器因为使用了缓存的资源而无法重新加载页面,就可能出现困难。为此,我们有时必须清除这些缓存。

用户可以根据自己的需要,使用JavaScript来清除浏览器的缓存内存。这些描述如下 –

  • location.reload()方法– 这是一种有效的方法,可以用来重新加载当前页面并禁用缓存。用户必须给出一个布尔值作为参数,并且该值应该被设置为真。这种技术不是使用缓存的版本,而是迫使浏览器从服务器上重新加载所有的资源。

  • 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的全局对象,而reload是location的方法。

例子

在这个例子中,我们使用 location.reload() 方法,用JavaScript清除缓存。我们使用了 “Clear cache “按钮,并将其与一个点击事件联系起来。点击事件处理程序执行了参数为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缓存。有一种类型的网络工作者,称为服务工作者,用于在后台执行众多进程,比如缓存资源。浏览器必须通过停用所有服务工作者的注册来清除其 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具有清除缓存的功能,可以根据需要使用。

Python教程

Java教程

Web教程

数据库教程

图形图像教程

大数据教程

开发工具教程

计算机教程

JavaScript 教程