Comment vider le cache en utilisant JavaScript ?
Aug 27, 2023 am 11:29 AMLe 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!

Article chaud

Outils chauds Tags

Article chaud

Tags d'article chaud

Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise
Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP

Dreamweaver CS6
Outils de développement Web visuel

SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Sujets chauds

Remplacer les caractères de chaîne en javascript

jQuery Vérifiez si la date est valide

jQuery obtient un rembourrage / marge d'élément

10 vaut la peine de vérifier les plugins jQuery

Http débogage avec le nœud et le http-console

jQuery Ajouter une barre de défilement à div

Tutoriel de configuration de l'API de recherche Google personnalisé
