Come svuotare la cache del browser a livello di programmazione?

Sto cercando un modo per svuotare a livello di programmazione la cache del browser. Lo sto facendo perché l'applicazione memorizza nella cache i dati riservati e vorrei rimuoverli quando premi "disconnetti". Ciò avverrebbe tramite server o JavaScript. Ovviamente, l'utilizzo del software su computer esterni / pubblici è ancora scoraggiato in quanto vi sono più pericoli come i keylogger che non puoi sconfiggere a livello di software.

È possibile, puoi semplicemente usare jQuery per sostituire il 'meta tag' che fa riferimento allo stato della cache con un gestore di eventi / pulsante, quindi aggiornare, facile,

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

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

NOTA: questa soluzione si basa sulla cache dell'applicazione implementata come parte delle specifiche HTML 5. Richiede inoltre la configurazione del server per impostare il manifest della cache dell'app. Non descrive un metodo con il quale è possibile svuotare la cache del browser "tradizionale" tramite codice lato client o server, il che è quasi impossibile da fare.

Non è possibile che un browser ti permetta di svuotare la cache. Sarebbe un enorme problema di sicurezza se fosse possibile. Questo potrebbe essere facilmente abusato: il minuto in cui un browser supporta una tale "funzionalità" sarà il minuto in cui lo disinstallerò dal mio computer.

Quello che puoi fare è dirgli di non memorizzare nella cache la tua pagina, inviando le intestazioni appropriate o utilizzando questi meta tag:

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

Potresti anche prendere in considerazione la disattivazione del completamento automatico nei campi del modulo, anche se temo che esista un modo standard per farlo ( vedi questa domanda ).

Indipendentemente da ciò, vorrei sottolineare che se stai lavorando con dati sensibili dovresti usare SSL. Se non utilizzi SSL, chiunque abbia accesso alla rete può rilevare il traffico di rete e vedere facilmente ciò che sta vedendo il tuo utente.

L'utilizzo di SSL fa sì che alcuni browser non utilizzino la cache a meno che non venga esplicitamente richiesto. Vedi questa domanda .

usa lo stesso html. C'è un trucco che può essere usato: il trucco è quello di aggiungere un parametro / stringa al nome del file nel tag dello script e cambiarlo quando si modifica il file.

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

Il browser interpreta l'intera stringa come il percorso del file anche se cosa viene dopo il "?" sono parametri. Quindi quello che succede ora è che la prossima volta che aggiorni il tuo file cambia semplicemente il numero nel tag dello script sul tuo sito web (Esempio <script src="myfile.js?version=1.0.1"></script>) e ogni browser degli utenti vedrà che il file è cambiato e ne prenderà una nuova copia.

L'idea migliore è fare la generazione di file js con il nome + un po 'di hash con la versione, se hai bisogno di svuotare la cache, genera semplicemente nuovi file con un nuovo hash, questo attiverà il browser per caricare nuovi file

Inizialmente ho provato vari approcci programmatici nel mio html, JS per cancellare la cache del browser. Niente funziona sull'ultimo Chrome.

Alla fine, ho finito con .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>

Testato in Chrome, Firefox, Opera

Riferimento: https://wp-mix.com/disable-caching-htaccess/

location.reload (true); ricaricherà la pagina corrente, ignorando la cache.
Cache.delete () può essere utilizzato anche per i nuovi Chrome, Firefox e Opera.

Su Chrome, dovresti essere in grado di farlo utilizzando l'estensione di benchmarking. Devi avviare il tuo Chrome con i seguenti interruttori:

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

Nella console di Chrome ora puoi eseguire le seguenti operazioni:

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

Come puoi vedere dai comandi precedenti, non solo cancella la cache del browser, ma cancella anche la cache DNS e chiude le connessioni di rete. Questi sono ottimi quando esegui il benchmarking del tempo di caricamento della pagina. Ovviamente non devi usarli tutti se non sono necessari (es. ClearCache () dovrebbe essere sufficiente se devi svuotare solo la cache e non ti interessa la cache DNS e le connessioni).

Ora puoi usare Cache.delete ()

Esempio:

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

Funziona su Chrome 40+, Firefox 39+, Opera 27+ e Edge.

Immagina che i .jsfile vengano inseriti/my-site/some/path/ui/js/myfile.js

Quindi normalmente il tag dello script sarebbe simile a:

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

Ora cambialo in:

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

Ovviamente non funzionerà. Per farlo funzionare devi aggiungere una o poche righe al tuo .htaccess La riga importante è: (intero .htaccess in fondo)

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

Quindi ciò che fa è che rimuove in qualche modo il file 1111111111 dal percorso e si collega al percorso corretto.

Quindi ora se apporti modifiche devi solo cambiare il numero 1111111111 in qualsiasi numero tu voglia. E comunque includi i tuoi file, puoi impostare quel numero tramite un timestamp quando il file js è stato modificato l'ultima volta. Quindi la cache funzionerà normalmente se il numero non cambia. Se cambia, servirà il nuovo file (SI SEMPRE) perché il browser ottiene un nuovo URL completo e crede che quel file sia così nuovo che deve andare a prenderlo.

È possibile utilizzare questo per CSS, faviconse quello che ottiene mai nella cache. Per i CSS basta usare così

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

E funzionerà! Semplice da aggiornare, semplice da mantenere.

Il .htaccess completo promesso

Se non hai ancora .htaccess questo è il minimo che devi avere lì:

<IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteBase /

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