web-dev-qa-db-fra.com

Effacer le cache en JavaScript

Comment vider le cache d'un navigateur avec JavaScript?

Nous avons déployé le dernier code JavaScript, mais nous ne pouvons pas obtenir le dernier code JavaScript.

Note éditoriale: Cette question est partiellement reproduite aux endroits suivants et la réponse à la première des questions suivantes est probablement la meilleure. Cette réponse acceptée n'est plus la solution idéale.

Comment forcer le navigateur à recharger les fichiers CSS/JS en cache?

Comment puis-je forcer les clients à actualiser les fichiers JavaScript?

Recharger dynamiquement les données Javascript source/json locales

165
subramani

Vous pouvez appeler window.location.reload (true) pour recharger la page en cours. Il ignorera tous les éléments mis en cache et récupérera de nouvelles copies de la page, des fichiers css, des images, du code JavaScript, etc. du serveur. Cela n'efface pas la totalité du cache, mais a pour effet d'effacer le cache de la page sur laquelle vous vous trouvez.

Cependant, votre meilleure stratégie consiste à modifier le chemin ou le nom du fichier comme indiqué dans diverses autres réponses. De plus, voir Noms de fichiers inversés: n’utilisez pas la chaîne de requête pour les raisons de ne pas utiliser ?v=n comme schéma de gestion des versions.

188
Kevin Hakanson

Vous ne pouvez pas vider le cache avec javascript. Une méthode courante consiste à ajouter au fichier le numéro de révision ou le dernier horodatage mis à jour, comme suit:

myscript.123.js

ou

myscript.js?updated=1234567890

106
Greg

Essayez de changer le src du fichier JavaScript? À partir de ceci:

<script language="JavaScript" src="js/myscript.js"></script>

Pour ça:

<script language="JavaScript" src="js/myscript.js?n=1"></script>

Cette méthode devrait obliger votre navigateur à charger une nouvelle copie du fichier JS.

37
Barry Gallagher

Outre la mise en cache toutes les heures ou toutes les semaines, vous pouvez mettre en cache en fonction des données du fichier.

Exemple (en PHP):

<script src="js/my_script.js?v=<?=md5_file('js/my_script.js')?>"></script>

ou même utiliser l'heure de modification du fichier:

<script src="js/my_script.js?v=<?=filemtime('js/my_script.js')?>"></script>
19
Alexandre T.

Vous pouvez également forcer le code à être rechargé toutes les heures, comme ceci, dans PHP:

<?php
echo '<script language="JavaScript" src="js/myscript.js?token='.date('YmdH').'">';
?>

ou

<script type="text/javascript" src="js/myscript.js?v=<?php echo date('YmdHis'); ?>"></script>
10
Fabien Ménager

mettez ceci à la fin de votre modèle:

var scripts =  document.getElementsByTagName('script');
var torefreshs = ['myscript.js', 'myscript2.js'] ; // list of js to be refresh
var key = 1; // change this key every time you want force a refresh
for(var i=0;i<scripts.length;i++){ 
   for(var j=0;j<torefreshs;j++){ 
      if(scripts[i].src && (scripts[i].src.indexOf(torefreshs[j]) > -1)){
        new_src = scripts[i].src.replace(torefreshs[j],torefreshs[j] + 'k=' + key );
        scripts[i].src = new_src; // change src in order to refresh js
      } 
   }
}
6
yboussard

essayez d'utiliser ceci

 <script language="JavaScript" src="js/myscript.js"></script>

Pour ça:

 <script language="JavaScript" src="js/myscript.js?n=1"></script>
5
Daniel

Voici un extrait de ce que j'utilise pour mon dernier projet.

Du contrôleur:

if ( IS_DEV ) {
    $this->view->cacheBust = microtime(true);
} else {
    $this->view->cacheBust = file_exists($versionFile) 
        // The version file exists, encode it
        ? urlencode( file_get_contents($versionFile) )
        // Use today's year and week number to still have caching and busting 
        : date("YW");
}

De la vue:

<script type="text/javascript" src="/javascript/somefile.js?v=<?= $this->cacheBust; ?>"></script>
<link rel="stylesheet" type="text/css" href="/css/layout.css?v=<?= $this->cacheBust; ?>">

Notre processus de publication génère un fichier avec le numéro de révision de la version actuelle. Cela fonctionne en encodant l'URL de ce fichier et en l'utilisant comme un bus de cache. En cas de basculement, si ce fichier n'existe pas, les numéros d'année et de semaine sont utilisés pour que la mise en cache fonctionne toujours et qu'il sera actualisé au moins une fois par semaine.

En outre, cela permet de contourner le cache à chaque chargement de page dans l’environnement de développement afin que les développeurs n’aient pas à s’occuper de vider le cache de toutes les ressources (javascript, css, appels ajax, etc.).

5
Justin Johnson

ou vous pouvez simplement lire le fichier js par serveur avec file_get_contets puis mettre en écho dans l'en-tête le contenu de js

5
albanx

Si vous utilisez php pouvez faire:

 <script src="js/myscript.js?rev=<?php echo time();?>"
    type="text/javascript"></script>
4
user3573488

J'ai eu quelques soucis avec le code suggéré par yboussard. La boucle j intérieure ne fonctionnait pas. Voici le code modifié que j'utilise avec succès.

function reloadScripts(toRefreshList/* list of js to be refresh */, key /* change this key every time you want force a refresh */) {
    var scripts = document.getElementsByTagName('script');
    for(var i = 0; i < scripts.length; i++) {
        var aScript = scripts[i];
        for(var j = 0; j < toRefreshList.length; j++) {
            var toRefresh = toRefreshList[j];
            if(aScript.src && (aScript.src.indexOf(toRefresh) > -1)) {
                new_src = aScript.src.replace(toRefresh, toRefresh + '?k=' + key);
                // console.log('Force refresh on cached script files. From: ' + aScript.src + ' to ' + new_src)
                aScript.src = new_src;
            }
        }
    }
}
3
Bryan

Peut-être que "effacer le cache" n'est pas aussi facile qu'il devrait l'être. Au lieu de vider le cache sur mes navigateurs, je me suis rendu compte que "toucher" le fichier changerait la date du fichier source mis en cache sur le serveur (Testé sur Edge, Chrome et Firefox ) et la plupart des navigateurs téléchargeront automatiquement la dernière copie la plus récente de votre contenu sur votre serveur (code, graphiques et multimédia). Je suggère que vous copiez simplement les scripts les plus récents sur le serveur et "faites le tactile" avant que votre programme ne soit exécuté, ainsi la date de tous vos fichiers problématiques sera modifiée en une date et une heure plus récentes , puis il télécharge une nouvelle copie sur votre navigateur:

<?php
    touch('/www/control/file1.js');
    touch('/www/control/file2.js');
    touch('/www/control/file2.js');
?>

... le reste de votre programme ...

Il a fallu un certain temps pour résoudre ce problème (de nombreux navigateurs agissant différemment selon les commandes, mais ils vérifient tous l’heure des fichiers et se comparent à la copie téléchargée dans votre navigateur. Si la date et l’heure sont différentes, l’actualisation sera effectuée). ne peut pas aller dans le bon sens, il existe toujours une autre solution utilisable et meilleure. Cordialement et bon camping.

3
Luis H Cabrejo

J'ai tendance à mettre à jour mon framework, puis à appliquer le numéro de version au script et aux chemins de style

<cfset fw.version = '001' />
<script src="/scripts/#fw.version#/foo.js"/>
1
SpliFF

S'il vous plaît ne donnez pas d'informations incorrectes. Cache api est un type de cache différent de cache http

cache HTTP est déclenché lorsque le serveur envoie le bon en-têtes , vous ne pouvez pas y accéder avec javasvipt.

Cache api dans l'autre main est déclenché quand vous le souhaitez, il est utile lorsque vous travaillez avec service worker afin que vous puissiez croiser une requête et y répondre à partir de ce type de cache, voir: - ilustration 1ilustration 2cours

Vous pouvez utiliser ces techniques pour avoir toujours un nouveau contenu sur vos utilisateurs:

  1. Utilisez location.reload (true) Cela ne fonctionne pas pour moi, je ne le recommanderais donc pas.
  2. Utilisez Cache api pour sauvegarder dans le cache et intersecter la demande avec service worker , soyez prudent avec celle-ci car si le serveur a envoyé le en-têtes de cache pour les fichiers que vous voulez actualiser, le navigateur répondra d'abord à partir du cache HTTP, et s'il ne le trouve pas, il ira sur le réseau afin que vous puissiez vous retrouver avec un ancien fichier.
  3. Changez l'URL de vos fichiers stactics, je vous recommande de le nommer avec le changement du contenu de vos fichiers, j'utilise md5 puis de le convertir en chaîne et en url, et le md5 changera avec le contenu du fichier, vous pouvez y envoyer librement des en-têtes de cache HTTP suffisamment longs

Je recommanderais le troisième voir

1
John Balvin Arias
window.parent.caches.delete("call")

fermez et ouvrez le navigateur après avoir exécuté le code dans la console.

1
Apoorv

Cache.delete () peut être utilisé pour les nouveaux chrome, firefox et opera.

1
Jay Shah

Vous pouvez également désactiver la mise en cache du navigateur avec les balises HTML méta. Il vous suffit de placer des balises HTML dans la section head pour éviter que la page Web ne soit mise en cache pendant le codage/test et lorsque vous avez terminé, vous pouvez supprimer les balises META.

(dans la section principale)

<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0"/>

Actualisez votre page après avoir collé ceci dans la tête et devrait également actualiser le nouveau code javascript.

Ce lien vous donnera d'autres options si vous en avez besoin http://cristian.sulea.net/blog/disable-browser-caching-with-meta-html-tags/

ou vous pouvez simplement créer un bouton comme si

<button type="button" onclick="location.reload(true)">Refresh</button>

il se rafraîchit et évite la mise en cache, mais il restera sur votre page jusqu'à la fin des tests. Vous pourrez ensuite l'enlever. La meilleure option est le poing.

0
alfmonc