Очистить кеш в JavaScript

Как очистить кеш браузера с помощью JavaScript?

Мы развернули последний код JavaScript, но мы не можем получить последний код JavaScript.

От редакции. Этот вопрос частично дублируется в следующих местах, и ответ на первый из следующих вопросов, вероятно, является лучшим. Этот принятый ответ больше не является идеальным решением.

Как заставить браузер перезагружать кэшированные файлы CSS/JS?

Как заставить клиентов обновлять файлы JavaScript?

Динамическая перезагрузка локального Javascript источника/данных JSON

Ответ 1

Вы можете вызвать window.location.reload(true), чтобы перезагрузить текущую страницу. Он будет игнорировать любые кешированные элементы и получать с сервера новые копии страницы, css, изображений, JavaScript и т.д. Это не очищает весь кеш, но имеет эффект очистки кеша для страницы, на которой вы находитесь.

Однако ваша лучшая стратегия заключается в том, чтобы указать путь или имя файла, как указано в других ответах. Кроме того, см. Revving Filenames: не используйте querystring по причинам, не использующим ?v=n как вашу схему управления версиями.

Ответ 2

Вы не можете очистить кеш с помощью javascript. Обычный способ - добавить в файл номер версии или последнюю обновленную временную метку, например:

myscript.123.js

или

myscript.js?updated=1234567890

Ответ 3

Попробуйте изменить файл JavaScript src? Из этого:

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

Для этого:

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

Этот метод должен заставить ваш браузер загружать новую копию файла JS.

Ответ 4

Помимо кэширования каждый час или каждую неделю, вы можете кэшировать в соответствии с данными файла.

Пример (в PHP):

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

или даже использовать время модификации файла:

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

Ответ 5

Вы также можете принудительно перезагрузить код каждый час, например, в PHP:

<?php
echo '<script language="JavaScript" src="js/myscript.js?token='.date('YmdH').'">';
?>

или

<script type="text/javascript" src="js/myscript.js?v=<?php echo date('YmdHis'); ?>"></script>

Ответ 6

поместите это в конец вашего шаблона:

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

Ответ 7

попробуйте использовать

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

Для этого:

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

Ответ 8

Вот фрагмент того, что я использую для моего последнего проекта.

От контроллера:

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 year and week number to still have caching and busting 
        : date("YW");
}

С точки зрения:

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

Наш процесс публикации создает файл с номером ревизии текущей сборки. Это работает путем URL-кодирования этого файла и использования этого в качестве кэша. Как отказ, если этот файл не существует, используются номер года и недели, так что кеширование все еще работает, и оно будет обновляться не реже одного раза в неделю.

Кроме того, это обеспечивает переполнение кеша для каждой загрузки страницы в среде разработки, поэтому разработчикам не нужно беспокоиться об очистке кеша для любых ресурсов (javascript, css, ajax calls и т.д.).

Ответ 9

или вы можете просто прочитать файл js сервером с помощью file_get_contets, а затем поместить в echo в заголовок содержимое js

Ответ 10

Если вы используете php, можете сделать:

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

Ответ 11

У меня были некоторые проблемы с кодом, предложенным yboussard. Внутренняя j-петля не работала. Вот модифицированный код, который я использую с успехом.

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

Ответ 12

Возможно, "очистка кеша" не так проста, как должна быть. Вместо того, чтобы очистить кеш в моих браузерах, я понял, что "касание" файла фактически изменит дату кеширования исходного файла на сервере (проверено на Edge, Chrome и Firefox), и большинство браузеров автоматически загрузят самую свежую свежую копию что на вашем сервере (код, графика и любые мультимедиа тоже). Я предлагаю вам просто скопировать самые последние сценарии на сервере и решить проблему "сделать что-то на ощупь" перед запуском вашей программы, поэтому она изменит дату всех ваших проблемных файлов на самую последнюю дату и время, а затем загрузит свежую копию в ваш браузер:

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

... остальная часть вашей программы...

Мне потребовалось некоторое время, чтобы решить эту проблему (поскольку многие браузеры по-разному работают с разными командами, но все они проверяют время файлов и сравнивают их с загруженной в браузере копией, если обновление даты и времени будут выполнять обновление), если вы не может пойти по правильному пути, всегда есть другое полезное и лучшее решение. С наилучшими пожеланиями и счастливого кемпинга.

Ответ 13

Я предпочитаю версию моей рамки, а затем применяю номер версии до script и пути стиля

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

Ответ 14

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

закрыть и открыть браузер после выполнения кода в консоли.

Ответ 15

Cache.delete() можно использовать для новых chrome, firefox и opera.

Ответ 16

Пожалуйста, не дайте неверную информацию. Cache api - это другой тип кэша от http cache

HTTP-кеш запускается, когда сервер отправляет правильные заголовки, вы не можете получить доступ с помощью javasvipt.

Cache api, с другой стороны, запускается, когда вы хотите, он полезен при работе с сервисным работником, поэтому вы можете пересечь запрос и ответить на него из этого типа кэша, см.: ilustration 1 ilustration 2 course

Вы можете использовать эти методы, чтобы всегда иметь свежий контент для ваших пользователей:

  1. Используйте location.reload(true), это не работает для меня, поэтому я бы не рекомендовал это.
  2. Используйте Cache api для сохранения в кеше и пересечения запроса с сервисным работником, будьте осторожны с этим, потому что, если сервер отправил заголовки кеша для файлов, которые вы хотите обновить, браузер сначала ответит из кеша HTTP, и если он не найдет его, то он пойдет в сеть, так что вы можете получить старый файл
  3. Измените URL из ваших файлов stactics, я рекомендую вам назвать его с изменением содержимого ваших файлов, я использую md5, а затем преобразовать его в дружественный к строке и URL, и md5 изменится с содержимым файла, там вы может свободно отправлять заголовки кеша HTTP достаточно долго

Я бы порекомендовал третий увидеть

Ответ 17

Вы также можете отключить кэширование в браузере с помощью мета-тегов HTML, просто поместив HTML-теги в раздел head, чтобы избежать кэширования веб-страницы во время кодирования/тестирования, а когда вы закончите, вы можете удалить мета-теги.

(в главном разделе)

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

Обновите свою страницу после вставки этого в заголовок и также должны обновить новый код JavaScript.

Эта ссылка предоставит вам другие варианты, если они вам нужны http://cristian.sulea.net/blog/disable-browser-caching-with-meta-html-tags/

или вы можете просто создать кнопку, как так

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

он обновляется и избегает кеширования, но он будет на вашей странице до тех пор, пока вы не закончите тестирование, а затем вы можете снять его. Первый вариант лучше всего.