Vider le cache en JavaScript

Comment puis-je vider un cache de navigateur avec JavaScript?

nous avons déployé le dernier code JavaScript, mais nous ne sommes pas en mesure d'obtenir le dernier code JavaScript.

note éditoriale: cette question Est semi-dupliquée 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 sa mémoire cache Des fichiers CSS/JS?

comment forcer les clients à rafraîchir les fichiers JavaScript?

rechargement dynamique Local Javascript source / données json

148
demandé sur Dylan Brams 2009-06-18 13:02:00

17 réponses

vous pouvez appeler la fenêtre .emplacement.recharger (true) pour recharger la page actuelle. Il ignorera tout élément caché et récupérera de nouvelles copies de la page, css, images, JavaScript, etc du serveur. Cela ne nettoie pas tout le cache, mais a pour effet de vider le cache pour la page sur laquelle vous êtes.

cependant, votre meilleure stratégie est de modifier le chemin ou le nom de fichier comme mentionné dans diverses autres réponses. En outre, voir Nom de fichier: n'utilisez pas querystring pour des raisons de ne pas utiliser ?v=n comme votre schéma de version.

170
répondu Kevin Hakanson 2013-08-22 22:27:30

vous ne pouvez pas effacer le cache avec javascript. Une façon courante est d'ajouter le numéro de révision ou la dernière mise à jour de l'horodatage au fichier, comme ceci:

myscript.123.js

ou

myscript.js?updated=1234567890

103
répondu Greg 2016-05-12 13:17:31

essayez de changer le src du fichier JavaScript? De ceci:

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

à ceci:

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

Cette méthode doit forcer votre navigateur à charger une nouvelle copie du fichier JS.

35
répondu Barry Gallagher 2009-06-18 09:09:22

autre que la mise en cache toutes les heures, ou chaque semaine, vous pouvez mettre en cache selon les données du fichier.

exemple (en PHP):

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

ou même:

<script src="js/my_script.js?v=<?=filemtime('js/my_script.js');?>"></script>
16
répondu Alexandre T. 2011-12-12 11:28:22

vous pouvez aussi forcer le code à être rechargé toutes les heures, comme ceci, en 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
répondu Fabien Ménager 2012-08-04 14:56:04

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
répondu yboussard 2011-03-31 09:08:39

essayez cette

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

à ceci:

 <script language="JavaScript" src="js/myscript.js?n=1"></script>
6
répondu Daniel 2015-09-16 07:48:10

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");
}

à Partir 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 ce fichier et en l'utilisant comme un buster de cache. Comme un échec, si ce fichier n'existe pas, le nombre d'année et de semaine sont utilisés de sorte que la mise en cache fonctionne toujours, et il sera être actualisé au moins une fois par semaine.

aussi, cela fournit le bust de cache pour chaque chargement de page pendant que dans l'environnement de développement de sorte que les développeurs n'ont pas à se soucier de nettoyer le cache pour des ressources (javascript, css, appels ajax, etc).

5
répondu Justin Johnson 2009-09-02 02:27:33

ou vous pouvez juste lire le fichier js par le serveur avec file_get_contets et ensuite mettre en écho dans l'en-tête le contenu js

4
répondu albanx 2011-07-22 12:05:02

si vous utilisez php peut faire:

 <script src="js/myscript.js?rev=<?php echo time();?>"
    type="text/javascript"></script>
4
répondu user3573488 2018-07-10 09:16:19

j'ai eu quelques problèmes avec le code suggéré par yboussard. La boucle j interne n'a pas fonctionné. 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
répondu Bryan 2012-06-08 21:14:41

Peut-être "effacer la mémoire cache" n'est pas aussi facile qu'il devrait être. Au lieu d'effacer la cache sur mes navigateurs, j'ai réalisé que "toucher" le fichier va effectivement changer la date du fichier source mis en cache sur le serveur (testé sur Edge, Chrome et Firefox) et la plupart des navigateurs téléchargera automatiquement la copie la plus récente de whats sur votre serveur (code, graphiques tout multimédia aussi). Je vous suggère de simplement copier les scripts les plus récents sur le serveur et "ne le touchez chose" solution avant que votre programme fonctionne, donc il va changer la date de tous vos fichiers de problème à une date actuelle et l'heure, puis télécharger une nouvelle copie de votre navigateur:

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

...le reste de votre programme...

il m'a fallu un certain temps pour résoudre ce problème (comme de nombreux navigateurs agissent différemment à différentes commandes, mais ils vérifient tous l'heure des fichiers et comparent à votre copie téléchargée dans votre navigateur, si la date et l'heure diffèrent, va faire le rafraîchissement), si vous ne pouvez pas aller dans la bonne voie supposée, Il ya toujours une autre solution utilisable et meilleure à elle. Meilleures salutations et camping heureux.

3
répondu Lucho Cabrejo 2017-06-12 00:23:05

j'ai tendance à mettre en version mon framework puis à appliquer le numéro de version aux chemins de script et de style

<cfset fw.version = '001' />
<script src="/scripts/#fw.version#/foo.js"/>
2
répondu SpliFF 2009-06-18 09:29:33
window.parent.caches.delete("call")

fermer et ouvrir le navigateur après avoir exécuté le code dans la console.

1
répondu Apoorv 2016-03-20 18:46:05

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

1
répondu Jay Shah 2017-05-16 17:10:01

s'il vous Plaît ne pas donner des informations erronées. API de Cache est un type de cache différent de cache http

cache HTTP est déclenché lorsque le serveur envoie le bon headers , vous ne pouvez pas accéder avec javasvipt.

api Cache dans l'autre main est tiré quand vous voulez, il est utile quand vous travaillez avec le service travailleur de sorte que vous pouvez intersecter la demande et y répondre à partir de ce type de cache voir: ilustration 1 ilustration 2 course

vous pourriez utiliser ces techniques pour avoir toujours un contenu frais sur vos utilisateurs:

  1. Utiliser emplacement.reload(true) cela ne fonctionne pas pour moi, donc je ne le recommande.
  2. Use API de Cache afin d'enregistrer dans le cache et intersecter le demande avec travailleur , être prudent avec celui-ci car si le serveur a envoyé le cache headers pour les fichiers que vous voulez pour se rafraîchir, le navigateur répondra d'abord à partir du cache HTTP, et s'il ne le trouve pas, alors il ira sur le réseau, de sorte que vous pourriez finir avec et vieux fichier
  3. changer l'url de vos fichiers stactics, mon recomendation, vous devez le nommer avec le changement de vos fichiers de contenu, j'utilise md5 puis de le convertir en chaîne de caractères et l'url sympathique, et le md5 va changer avec le contenu du fichier, vous pouvez facilement envoyer le cache HTTP assez longtemps

je conseille le troisième voir

1
répondu John Balvin Arias 2018-07-12 01:56:47
  var clearCache = function(cacheName){
     return caches.open(cacheName).then(function(cache) {
      cache.keys().then(function(keys) {
      keys.forEach(function(request, index, array) {
        cache.delete(request);
        // console.log(`deleted ${request}`)

         });
        });
      })
    }

    var updated = localStorage.getItem("v2-update");
    if(!updated){

    localStorage.setItem('v2-update', true);
    caches.keys().then(function(keyList) {
        console.log(keyList, "caches")
        for(var i = 0;i < keyList.length;i++){
          var cacheKeyName = keyList[i]
          if(cacheKeyName !== "images"){
            console.log('clear', cacheKeyName)
          clearCache(cacheKeyName);
          }
        }
        return;

      })
   }
-1
répondu Gerard Tolan 2018-05-11 10:35:59