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

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

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

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

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

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

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

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

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

Вы не можете очистить кеш с помощью JavaScript. Распространенным способом является добавление номера редакции или последней обновленной метки времени в файл, например так:

myscript.123.js

или

myscript.js?updated=1234567890

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

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

К этому:

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

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

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

Пример (в 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>

Вы также можете принудительно перезагружать код каждый час, например, в 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>

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

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

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

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

К этому:

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

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

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

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

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

<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 и т. Д.).

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

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

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

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

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

У меня были некоторые проблемы с кодом, предложенным 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;
            }
        }
    }
}

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

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

Cache.delete () можно использовать для новых Chrome, Firefox и Opera.

Пожалуйста, не дайте неверную информацию. 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 достаточно долго

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

Вы также можете отключить кэширование в браузере с помощью мета-тегов 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>

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

Я склоняюсь к версии своего фреймворка, затем применяю номер версии к сценариям и путям стилей

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

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

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

window.location.reload(true)кажется, устарел по стандарту HTML5. Один из способов сделать это без использования строк запроса - использовать Clear-Site-Dataзаголовок , который кажется стандартизированным .

Потому что браузер кеширует ту же ссылку, вы должны добавить случайное число в конце URL. new Date().getTime()создать другое число.

Просто добавьте new Date().getTime()конец ссылки как вызов

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

Вывод: https://stackoverflow.com/questions.php?1571737901173