Je cherche un moyen de vider par programme 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 le 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 les enregistreurs de frappe que vous ne pouvez pas vaincre au niveau du logiciel.
10 réponses
Il est possible, vous pouvez simplement utiliser jQuery pour remplacer la «balise meta» qui fait référence à l'état du cache avec un gestionnaire / bouton d'événement, puis actualiser, facilement,
$('.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'application implémenté dans le cadre de la spécification HTML 5. Il nécessite également la configuration du serveur pour configurer le manifeste App Cache. Il ne décrit pas une méthode par laquelle on peut effacer le cache du navigateur «traditionnel» via du code côté client ou serveur, ce qui est pratiquement impossible à faire.
Utiliser html lui-même.Il existe une astuce qui peut être utilisée.L'astuce consiste à ajouter un paramètre / chaîne au nom de fichier dans la balise de script et à le modifier lorsque vous effectuez des modifications.
<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 vient après le "?" sont des paramètres. Donc, ce qui se passe maintenant, c'est que la prochaine fois que vous mettrez à jour votre fichier, changez simplement le numéro dans la balise de script sur votre site Web (exemple <script src="myfile.js?version=1.0.1"></script>
) et chaque navigateur d'utilisateurs verra que le fichier a changé et en récupérera une nouvelle copie.
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 désormais effectuer les opérations suivantes:
chrome.benchmarking.clearCache();
chrome.benchmarking.clearHostResolverCache();
chrome.benchmarking.clearPredictorCache();
chrome.benchmarking.closeConnections();
Comme vous pouvez le voir à partir des commandes ci-dessus, il efface non seulement le cache du navigateur, mais également le cache DNS et ferme les connexions réseau. Ils sont parfaits lorsque vous effectuez une analyse comparative du temps de chargement des pages. Évidemment, vous n'êtes pas obligé de les utiliser tous 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).
Location.reload (true); rechargera la page en cours en ignorant le cache.
Cache.delete () peut également être utilisé pour nouveaux chrome, firefox et opéra.
La meilleure idée est de faire la génération de fichiers js avec le nom + un hachage avec la version, si vous avez besoin d'effacer le cache, générez simplement de nouveaux fichiers avec un nouveau hachage, cela déclenchera le navigateur pour charger de nouveaux fichiers
//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 >
Au départ, j'ai essayé diverses approches programmatiques dans mon html, JS pour effacer le cache du navigateur. Rien ne fonctionne sur le dernier Chrome.
Enfin, 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é dans Chrome, Firefox, Opera
Référence: https://wp-mix.com/disable-caching-htaccess/
Vous pouvez désormais 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.
Imaginez que les .js
fichiers sont placés dans /my-site/some/path/ui/js/myfile.js
Donc, normalement, la balise de script devrait ressembler à 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 le faire fonctionner, vous devez ajouter une ou quelques lignes à votre .htaccess
La ligne importante est: (tout .htaccess en bas)
RewriteRule ^my-site\/(.*)\/ui\-([0-9]+)\/(.*) my-site/$1/ui/$3 [L]
Donc, ce que cela fait, il supprime en quelque sorte le 1111111111
du chemin et établit un lien vers le chemin correct.
Alors maintenant, si vous apportez des modifications, il vous suffit de changer le nombre 1111111111
en n'importe quel nombre que vous voulez. Et quelle que soit la manière dont vous incluez vos fichiers, vous pouvez définir ce nombre via un horodatage lors de la dernière modification du fichier js. Le cache fonctionnera donc normalement si le nombre ne change pas. S'il change, il servira le nouveau fichier (OUI TOUJOURS) parce que le navigateur obtient une nouvelle URL complète et croit simplement que le fichier est si nouveau qu'il doit aller le chercher.
Vous pouvez l'utiliser pour CSS
, favicons
et tout ce qui est mis en cache. Pour CSS, utilisez simplement comme ça
<link href="http://my-domain.com/my-site/some/path/ui-1492513798/css/page.css" type="text/css" rel="stylesheet">
Et ça marchera! Simple à mettre à jour, simple à entretenir.
Le .htaccess complet promis
Si vous n'avez pas encore de .htaccess c'est le minimum que vous devez y avoir:
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^my-site\/(.*)\/ui\-([0-9]+)\/(.*) my-site/$1/ui/$3 [L]
</IfModule>
Il n'y a aucun moyen qu'un navigateur vous permettra de vider 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 le désinstallerai de mon ordinateur.
Ce que vous pouvez faire est de lui dire de ne pas mettre en cache votre page, en envoyant les en-têtes appropriés ou en utilisant ces balises META:
<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 existe 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 à ne pas utiliser la mise en cache, sauf indication contraire explicite. Voir cette question.
Questions connexes
Questions liées
De nouvelles questions
javascript
Pour des questions concernant la programmation dans ECMAScript (JavaScript / JS) et ses divers dialectes / implémentations (hors ActionScript). Veuillez inclure toutes les balises pertinentes dans votre question; par exemple, [node.js], [jquery], [json], etc.