Maison > Article > interface Web > Comment vider le cache en utilisant JavaScript ?

Comment vider le cache en utilisant JavaScript ?

WBOYavant: 2023-08-27 11:29:022020parcourir

如何使用 JavaScript 清除缓存？

Le cache, communément appelé cache, est un système de mémoire différent dans un ordinateur qui stocke les données et les instructions fréquemment utilisées pendant une courte période de temps. Lors du chargement d'un site Web, les navigateurs que nous utilisons mettent automatiquement en cache certaines ressources, telles que les images, les scripts et les feuilles de style, afin qu'elles puissent être réutilisées lors du rechargement de la page. Non seulement cela réduit le temps de chargement de votre site Web, mais cela contribue également à réduire la quantité de données à envoyer sur le réseau. Mais ce type de cache stocké par le navigateur présente également certains inconvénients. Des problèmes peuvent survenir si les ressources mises en cache sont obsolètes ou si le navigateur ne parvient pas à recharger la page car il utilise des ressources mises en cache. Pour ce faire, nous devons parfois vider ces caches.

Les utilisateurs peuvent utiliser JavaScript pour vider le cache du navigateur si nécessaire. Ceux-ci sont décrits ci-dessous -

Méthode location.reload() - L'une des méthodes efficaces qui peuvent être utilisées pour recharger la page actuelle et désactiver la mise en cache. L'utilisateur doit donner une valeur booléenne en paramètre et la valeur doit être définie sur true. Au lieu d'utiliser des versions mises en cache, cette technique oblige le navigateur à recharger toutes les ressources du serveur.
Méthode navigateur.serviceWorker.getRegistrations() - Il s'agit d'une alternative à l'exécution de la méthode de désinscription pour chaque enregistrement après avoir récupéré toutes les inscriptions Service Worker à l'aide de la méthode getRegistrations() de l'objet navigator.serviceWorker. Le navigateur supprimera alors son cache HTTP.
Méthodes caches.open() et cache.delete() - Cette méthode utilise l'API Cache pour ouvrir un cache nommé, puis supprime une ressource spécifique du cache à l'aide de la méthode delete()
Méthodes localStorage.clear() et sessionStorage.clear()- Pour supprimer toutes les paires clé-valeur de l'objet localStorage, les utilisateurs peuvent utiliser la méthode localStorage.clear(). La fonction sessionStorage.clear() peut supprimer toutes les paires clé-valeur de l'objet sessionStorage.

Utilisez la méthode location.reload()

Lorsque le paramètre booléen est défini sur true, la méthode location.reload() ne mettra pas en cache la page actuelle, mais la rechargera. Si vous spécifiez true comme paramètre, le navigateur téléchargera toutes les ressources (y compris les images et les scripts) directement depuis le serveur au lieu d'utiliser des copies en cache.

Grammaire

location.reload(true);

Dans la syntaxe ci-dessus, location est l'objet global de JavaScript et surcharge la méthode de localisation.

Exemple

Dans cet exemple, nous utilisons la méthode location.reload() pour vider la mémoire cache via JavaScript. Nous avons utilisé un bouton « vider le cache » et l'avons associé à un événement de clic. Le gestionnaire d'événements click exécute la méthode location.reload() avec le paramètre true. Chaque fois que l'utilisateur clique sur le bouton, JavaScript force le navigateur à recharger la page Web sans le fichier mis en cache.

<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>

La page Web affiche ce message et recharge rapidement les derniers fichiers.

Utilisez la méthode navigator.serviceWorker.getRegistrations()

En JavaScript, la méthode navigator.serviceWorker.getRegistrations() est la deuxième façon dont les utilisateurs peuvent vider la mémoire cache en désenregistrant tous les enregistrements de threads de travail de service, et la méthode navigator.serviceWorker.getRegistrations() peut être utilisée pour effacer parcourir le cache HTTP du serveur. Un type de Web Worker est appelé Service Worker et est utilisé pour exécuter un grand nombre de processus en arrière-plan, tels que la mise en cache des ressources. Le navigateur doit vider son cache HTTP en désactivant toutes les inscriptions des techniciens de service.

Grammaire

if ('serviceWorker' in navigator) {
   navigator.serviceWorker.getRegistrations()
   .then(function(registrations) {
      for(let registration of registrations) {
         registration.unregister();
      }
   });
}

Dans la syntaxe ci-dessus, nous vérifions si "serviceWorker" est disponible dans l'objet navigateur. Nous désenregistrons ensuite le Service Worker à l'aide des méthodes navigator.serviceWorker.getRegistrations() et registration.unregister().

Exemple

Dans cet exemple, nous vidons le cache en désinscrivant le Service Worker à l'aide de JavaScript. Nous avons utilisé un bouton « vider le cache » et l'avons associé à un événement de clic. Le gestionnaire d'événements click exécute une fonction qui désenregistre le Service Worker. Les méthodes navigator.serviceWorker.getRegistrations() et registration.unregister() sont utilisées pour désinscrire un Service Worker. Après vous être déconnecté, nous affichons un message sur la page Web.

<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>

Vider le cache est une bonne pratique, mais cela peut parfois affecter les performances d'une page Web car tous les fichiers doivent être récupérés. JavaScript a la capacité de vider le cache, qui peut être utilisé selon les besoins.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer

Article précédent：Comment activer la sélection d'objet uniquement lorsque l'objet est entièrement contenu dans la zone de sélection dans FabricJS ?Article suivant：Comment activer la sélection d'objet uniquement lorsque l'objet est entièrement contenu dans la zone de sélection dans FabricJS ?

Articles Liés

Voir plus