Очистіть кеш у JavaScript

Як очистити кеш браузера за допомогою JavaScript?

Ми розгорнули найновіший код JavaScript, але не вдається отримати найновіший код JavaScript.

Примітка до редакції: Це запитання повторно дублюється в наступних місцях, і відповідь у першому з наступних питань, мабуть, найкращий. Ця прийнята відповідь вже не є ідеальним рішенням.

Як змусити браузер перезавантажити кешовані файли CSS / JS?

Як змусити клієнтів оновити файли JavaScript?

Динамічно перезавантажуйте локальні дані джерела / json Javascript

Ви можете зателефонувати window.location.reload (правда), щоб перезавантажити поточну сторінку. Він буде ігнорувати будь-які кешовані елементи та отримувати з сервера нові копії сторінки, CSS, зображень, JavaScript тощо. Це не очищає весь кеш, але має наслідком очищення кешу сторінки, на якій ви перебуваєте.

Однак найкращою стратегією є версія версії шляху або імені файлу, як згадується в різних інших відповідях. Крім того, див. Розділ Імена файлів Revving: не використовуйте рядок запитів з причин не використовувати ?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, а потім помістити ехо в заголовок вмісту 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 () можна використовувати для нових хром, фаєрфоксу та опери.

Будь ласка, не вказуйте невірну інформацію. Кеш api - це різний тип кешу від http кеша

Кеш HTTP запускається, коли сервер надсилає правильні заголовки , ви не можете отримати доступ через javasvipt.

Кеш апіте в іншій руці спрацьовують , коли ви хочете, це корисно при роботі з обслуговуванням працівника , щоб ви могли перетинатися запитом і відповісти на нього від цього типу кеша см: ілюстративний 1 ілюстративний 2 курс

Ви можете використовувати ці методи, щоб завжди мати свіжий вміст для своїх користувачів:

1. Використовувати location.reload (правда) це не працює для мене, тому я не рекомендуватиму його.
2. Використовуйте Cache api для збереження в кеші та пересікання запиту з працівником служби , будьте обережні з цим, оскільки якщо сервер надіслав заголовки кешу для файлів, які ви хочете оновити, браузер відповість спочатку з кеша HTTP, і якщо він не знайде його, він перейде в мережу, щоб ви могли закінчити і старий файл
3. Змініть URL-адресу з ваших файлів stactics, моя рекомендація - це ви повинні назвати його зі зміною вмісту ваших файлів, я використовую md5, а потім перетворять його в строковий і URL-адрес, і md5 зміниться зі змістом файлу, там ви Ви можете вільно надсилати заголовки кеша HTTP досить довго

Я б рекомендував третій див

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

(у головному розділі)

<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