Limpar o cache em JavaScript

Como limpo o cache de um navegador com JavaScript?

Implementamos o código JavaScript mais recente, mas não conseguimos obter o código JavaScript mais recente.

Nota Editorial: Esta pergunta é semi-duplicada nos seguintes locais, e a resposta na primeira das seguintes perguntas é provavelmente a melhor. Essa resposta aceita não é mais a solução ideal.

Como forçar o navegador a recarregar arquivos CSS / JS em cache?

Como forçar os clientes a atualizar arquivos JavaScript?

Recarregar dinamicamente a fonte Javascript local / dados json

Você pode chamar window.location.reload (true) para recarregar a página atual. Ele ignorará todos os itens em cache e recuperará novas cópias da página, css, imagens, JavaScript etc. do servidor. Isso não limpa o cache inteiro, mas tem o efeito de limpar o cache da página em que você está.

No entanto, sua melhor estratégia é a versão do caminho ou nome do arquivo, conforme mencionado em várias outras respostas. Além disso, consulte Revving Nomes de arquivos: não use a string de consulta por motivos para não usar ?v=ncomo seu esquema de versão.

Você não pode limpar o cache com javascript. Uma maneira comum é acrescentar o número da revisão ou o último carimbo de data / hora atualizado ao arquivo, assim:

myscript.123.js

ou

myscript.js?updated=1234567890

Tente alterar o src do arquivo JavaScript? Disto:

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

Para isso:

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

Este método deve forçar seu navegador a carregar uma nova cópia do arquivo JS.

Além de armazenar em cache a cada hora ou a cada semana, você pode armazenar em cache de acordo com os dados do arquivo.

Exemplo (em PHP):

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

ou até mesmo usar o horário de modificação do arquivo:

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

Você também pode forçar o recarregamento do código a cada hora, como este, no 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>

coloque isso no final do seu modelo:

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

tente usar isso

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

Para isso:

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

Aqui está um trecho do que estou usando no meu projeto mais recente.

Do controlador:

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

Do ponto de vista:

<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; ?>">

Nosso processo de publicação gera um arquivo com o número de revisão da compilação atual. Isso funciona pela URL que codifica esse arquivo e o usa como um buster de cache. Como failover, se esse arquivo não existir, o número do ano e da semana será usado para que o cache ainda funcione e ele será atualizado pelo menos uma vez por semana.

Além disso, isso fornece interrupção do cache para cada carregamento de página no ambiente de desenvolvimento, para que os desenvolvedores não precisem se preocupar em limpar o cache de quaisquer recursos (javascript, css, chamadas ajax, etc.).

ou você pode simplesmente ler o arquivo js pelo servidor com file_get_contets e depois colocar eco no cabeçalho do conteúdo do js

Talvez "limpar o cache" não seja tão fácil quanto deveria ser. Em vez de limpar o cache nos meus navegadores, percebi que "tocar" no arquivo mudaria a data do arquivo de origem armazenado em cache no servidor (Testado no Edge, Chrome e Firefox) e a maioria dos navegadores baixaria automaticamente a cópia atualizada mais recente do o que está no seu servidor (código, gráficos também qualquer multimídia). Sugiro que você copie os scripts mais atuais no servidor e a solução "faça o que é necessário" antes da execução do programa, para que ele altere a data de todos os seus arquivos com problemas para a data e hora mais atuais e faça o download de uma nova cópia para o seu navegador:

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

... o resto do seu programa ...

Levei algum tempo para resolver esse problema (como muitos navegadores agem de maneira diferente com comandos diferentes, mas todos verificam a hora dos arquivos e se comparam à sua cópia baixada no seu navegador, se houver data e hora diferentes, fará a atualização), se você Não é possível seguir o caminho certo, sempre há outra solução melhor e utilizável. Cumprimentos e acampamento feliz.

Eu tive alguns problemas com o código sugerido por yboussard. O loop j interno não funcionou. Aqui está o código modificado que eu uso com sucesso.

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

Se você estiver usando o php pode fazer:

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

Cache.delete () pode ser usado para o novo chrome, firefox e opera.

Por favor, não forneça informações incorretas. A API do cache é um tipo diferente de cache do cache http

O cache HTTP é acionado quando o servidor envia os cabeçalhos corretos , você não pode acessar com javasvipt.

A API de cache, por outro lado, é acionada quando você deseja; é útil ao trabalhar com o técnico de serviço, para que você possa interceptar a solicitação e respondê-la a partir desse tipo de cache, consulte: ilustração 1 ilustração 2 curso

Você pode usar essas técnicas para ter sempre um conteúdo novo para seus usuários:

1. Usar location.reload (true), isso não funciona para mim, então eu não recomendo.
2. Use a API do cache para salvar no cache e cruzar a solicitação com o trabalhador do serviço , tenha cuidado com este porque se o servidor enviou o cabeçalhos do cache para os arquivos que você deseja atualizar, o navegador responderá primeiro pelo cache HTTP, e se não o encontrar, ele irá para a rede, para que você possa acabar com um arquivo antigo
3. Mude o URL dos seus arquivos de estratégia, minha recomendação é que você o nomeie com a alteração do conteúdo dos seus arquivos, eu uso o MD5 e depois o converto em string e URL amigável, e o MD5 muda com o conteúdo do arquivo. pode enviar livremente cabeçalhos de cache HTTP por tempo suficiente

Eu recomendaria o terceiro ver

Você também pode desativar o cache do navegador com meta tags HTML. Basta colocar tags html na seção head para evitar que a página da Web seja armazenada em cache enquanto você estiver codificando / testando e, quando terminar, pode remover as meta tags.

(na seção principal)

<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"/>

Atualize sua página depois de colar isso na cabeça e também atualize o novo código javascript.

Este link fornecerá outras opções se você precisar delas http://cristian.sulea.net/blog/disable-browser-caching-with-meta-html-tags/

ou você pode simplesmente criar um botão como esse

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

ele é atualizado e evita o armazenamento em cache, mas ele permanecerá na sua página até que você termine o teste e poderá removê-lo. A primeira opção é a melhor opção.

Tendo a versão minha estrutura, aplico o número da versão aos caminhos de script e estilo

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

window.parent.caches.delete("call")

feche e abra o navegador depois de executar o código no console.

window.location.reload(true)parece ter sido descontinuado pelo padrão HTML5. Uma maneira de fazer isso sem usar cadeias de consulta é usar o Clear-Site-Datacabeçalho , que parece estar padronizado .

Como o cache do navegador está no mesmo link, você deve adicionar um final de número aleatório do URL. new Date().getTime()gerar um número diferente.

Basta adicionar o new Date().getTime()final do link como uma chamada

'https://stackoverflow.com/questions.php?' + new Date().getTime()

Resultado: https://stackoverflow.com/questions.php?1571737901173