web-dev-qa-db-fra.com

Comment vider par programme le cache du navigateur?

Je cherche un moyen de vider par programmation le cache du navigateur. Je le fais parce que l’application met en cache des données confidentielles et j’aimerais les supprimer lorsque vous appuyez sur "Déconnexion". Cela se produirait via serveur ou JavaScript. Bien sûr, l'utilisation du logiciel sur un ordinateur étranger/public est toujours déconseillée car il y a plus de dangers, comme des enregistreurs de clé, que vous ne pouvez pas vaincre au niveau logiciel.

javascripthtml5cachingbrowser
91
Tower

Il est possible, vous pouvez simplement utiliser jQuery pour remplacer la "balise méta" qui fait référence au statut du cache avec un gestionnaire d'événement/bouton, puis d'actualiser, facile, 

$('.button').click(function() {
    $.ajax({
        url: "",
        context: document.body,
        success: function(s,x){

            $('html[manifest=saveappoffline.appcache]').attr('content', '');
                $(this).html(s);
        }
    }); 
});

REMARQUE: cette solution repose sur le cache d'applications implémenté dans la spécification HTML 5. La configuration du serveur est également requise pour configurer le manifeste du cache de l'application. Il ne décrit pas de méthode permettant d'effacer le cache du navigateur «traditionnel» via un code côté client ou côté serveur, ce qui est pratiquement impossible à faire.

35
Zeal Murapa

Il n'y a aucun moyen qu'un navigateur vous laisse effacer son cache. Ce serait un énorme problème de sécurité si cela était possible. Cela pourrait être très facilement abusé - la minute où un navigateur prend en charge une telle "fonctionnalité" sera la minute où je la désinstalle de mon ordinateur. 

Ce que vous pouvez faites, c'est de lui dire de ne pas mettre votre page en cache, en envoyant les en-têtes appropriés ou en utilisant ces balises méta:

<meta http-equiv='cache-control' content='no-cache'>
<meta http-equiv='expires' content='0'>
<meta http-equiv='pragma' content='no-cache'>

Vous pouvez également envisager de désactiver la saisie semi-automatique dans les champs de formulaire, bien que je crains qu'il n'y ait une méthode standard pour le faire ( voir cette question ).

Quoi qu'il en soit, je voudrais souligner que si vous travaillez avec des données sensibles, vous devez utiliser SSL. Si vous n'utilisez pas SSL, toute personne ayant accès au réseau peut détecter le trafic réseau et voir facilement ce que voit votre utilisateur.

L’utilisation de SSL oblige également certains navigateurs non à utiliser la mise en cache, sauf indication contraire explicite. Voir cette question .

134
NullUserException

utilisez le code HTML lui-même.Il existe une astuce qui peut être utilisée. L'astuce consiste à ajouter un paramètre/une chaîne au nom de fichier dans la balise de script et à le modifier lorsque vous modifiez le fichier.

<script src="myfile.js?version=1.0.0"></script>

Le navigateur interprète la chaîne entière comme le chemin du fichier, même si ce qui suit le "?" sont des paramètres. La prochaine fois que vous mettrez votre fichier à jour, changez simplement le numéro dans la balise script de votre site Web (exemple <script src="myfile.js?version=1.0.1"></script>) et le navigateur de chaque utilisateur verra que le fichier a été modifié et récupérera une nouvelle copie.

12
Joish

La meilleure idée est de faire de la génération de fichier js avec le nom + un peu de hachage avec la version. Si vous devez vider le cache, générez simplement de nouveaux fichiers avec un nouveau hachage, cela déclenchera le navigateur pour charger de nouveaux fichiers.

7
Admiral Duck

Sur Chrome, vous devriez pouvoir le faire en utilisant l'extension d'analyse comparative. Vous devez démarrer votre chrome avec les commutateurs suivants:

./chrome --enable-benchmarking --enable-net-benchmarking

Dans la console de Chrome, vous pouvez maintenant effectuer les opérations suivantes:

chrome.benchmarking.clearCache();
chrome.benchmarking.clearHostResolverCache();
chrome.benchmarking.clearPredictorCache();
chrome.benchmarking.closeConnections();

Comme vous pouvez le constater, les commandes ci-dessus effacent non seulement le cache du navigateur, mais également le cache DNS et ferment les connexions réseau. Celles-ci sont excellentes lorsque vous effectuez une analyse comparative du temps de chargement des pages. Bien entendu, vous n'avez pas besoin de tous les utiliser si vous n'en avez pas besoin (par exemple, clearCache () devrait suffire si vous devez vider le cache uniquement et ne vous souciez pas du cache DNS et des connexions).

3
kakhkAtion

location.reload (true); va recharger la page en cours, en ignorant le cache .
Cache.delete () peut également être utilisé pour les nouveaux chrome, firefox et opera.

3
Jay Shah

Au départ, j’ai essayé diverses approches de programmation dans mon html, JS pour vider le cache du navigateur. Rien ne fonctionne sur le dernier Chrome.

Finalement, je me suis retrouvé avec .htaccess:

<IfModule mod_headers.c>
    Header set Cache-Control "no-cache, no-store, must-revalidate"
    Header set Pragma "no-cache"
    Header set Expires 0
</IfModule>

Testé sur Chrome, Firefox, Opera

Référence: https://wp-mix.com/disable-caching-htaccess/

3
rajagopalx

Vous pouvez maintenant utiliser Cache.delete ()

Exemple:

let id = "your-cache-id";
// you can find the id by going to 
// application>storage>cache storage 
// (minus the page url at the end)
// in your chrome developer console 

caches.open(id)
.then(cache => cache.keys()
  .then(keys => {
    for (let key of keys) {
      cache.delete(key)
    }
  }));

Fonctionne sur Chrome 40+, Firefox 39+, Opera 27+ et Edge.

1
r.delic

//The code below should be put in the "js" folder with the name "clear-browser-cache.js"

(function () {
    var process_scripts = false;
    var rep = /.*\?.*/,
    links = document.getElementsByTagName('link'),
    scripts = document.getElementsByTagName('script');
    var value = document.getElementsByName('clear-browser-cache');
    for (var i = 0; i < value.length; i++) {
        var val = value[i],
            outerHTML = val.outerHTML;
        var check = /.*value="true".*/;
        if (check.test(outerHTML)) {
            process_scripts = true;
        }
    }
    for (var i = 0; i < links.length; i++) {
        var link = links[i],
        href = link.href;
        if (rep.test(href)) {
            link.href = href + '&' + Date.now();
        }
        else {
            link.href = href + '?' + Date.now();
        }
    }
    if (process_scripts) {
        for (var i = 0; i < scripts.length; i++) {
            var script = scripts[i],
            src = script.src;
            if (src !== "") {
                if (rep.test(src)) {
                    script.src = src + '&' + Date.now();
                }
                else {
                    script.src = src + '?' + Date.now();
                }
            }
        }
    }
})();
At the end of the tah head, place the line at the code below

    < script name="clear-browser-cache" src='js/clear-browser-cache.js' value="true" >< /script >

1
haimirick

Imaginez que les fichiers .js soient placés dans /my-site/some/path/ui/js/myfile.js

Donc, normalement, la balise de script ressemblerait à ceci:

<script src="/my-site/some/path/ui/js/myfile.js"></script>

Maintenant changez cela en:

<script src="/my-site/some/path/ui-1111111111/js/myfile.js"></script>

Maintenant, bien sûr, cela ne fonctionnera pas. Pour que cela fonctionne, vous devez ajouter une ou plusieurs lignes à votre .htaccess La ligne importante est la suivante: (.htaccess entier en bas)

RewriteRule ^my-site\/(.*)\/ui\-([0-9]+)\/(.*) my-site/$1/ui/$3 [L]

Ainsi, cela supprime le 1111111111 du chemin et les liens vers le chemin correct. 

Alors maintenant, si vous apportez des modifications, il vous suffit de remplacer 1111111111 par le numéro de votre choix. Et quelle que soit la manière dont vous incluez vos fichiers, vous pouvez définir ce numéro via un horodatage lors de la dernière modification du fichier js. Ainsi, le cache fonctionnera normalement si le nombre ne change pas. S'il change, il servira le nouveau fichier (OUI TOUJOURS) car le navigateur obtient une nouvelle adresse URL complète et croit simplement que ce fichier est si nouveau qu'il doit aller le chercher.

Vous pouvez utiliser ceci pour CSS, favicons et ce qui est jamais mis en cache. Pour CSS, utilisez simplement

<link href="http://my-domain.com/my-site/some/path/ui-1492513798/css/page.css" type="text/css" rel="stylesheet">

Et ça va marcher! Simple à mettre à jour, simple à maintenir.

Le .htaccess complet promis

Si vous n’avez pas encore de .htaccess, c’est le minimum dont vous avez besoin:

<IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteBase /

    RewriteRule ^my-site\/(.*)\/ui\-([0-9]+)\/(.*) my-site/$1/ui/$3 [L]
</IfModule>
0
caramba