Как программно очистить кеш браузера?

121

Я ищу способ программно очистить кеш браузера. Я делаю это, потому что приложение кэширует конфиденциальные данные, и я хотел бы удалить их, когда вы нажмете «выйти». Это произойдет либо через сервер, либо через JavaScript. Конечно, использование программного обеспечения на чужом / общедоступном компьютере по-прежнему не рекомендуется, поскольку существует больше опасностей, таких как регистраторы ключей, которые вы просто не можете победить на программном уровне.

башня
источник
3
Какие браузеры? Вам также следует обратить внимание на то, как указать браузеру, что не следует кэшировать с сервера, а не пытаться его стереть.
Mech Software
Вы также можете ознакомиться с этим руководством по кэшированию и тому, как оно работает. mnot.net/cache_docs охватывает заголовки управления кешем и тому подобное
scrappedcola
@MechSoftware Я хочу кэшировать для более быстрой загрузки страниц, но хочу очистить его после выхода из системы. Желательно как можно лучше поддерживать браузер.
Tower
2
@rFactor Никто не будет использовать браузер, который дает веб-сайтам возможность управлять своим кешем.
NullUserException
3
Де-факто веб-сайты контролируют кеш, потому что они контролируют заголовки HTTP.
Danubian Sailor

Ответы:

38

Возможно, вы можете просто использовать jQuery для замены «метатега», который ссылается на статус кеша, на обработчик / кнопку события, а затем обновить, легко,

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

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

ПРИМЕЧАНИЕ. Это решение основывается на кэше приложений, который реализован как часть спецификации HTML 5. Также требуется конфигурация сервера для настройки манифеста App Cache. Он не описывает метод, с помощью которого можно очистить «традиционный» кеш браузера с помощью клиентского или серверного кода, что практически невозможно сделать.

Рвение Мурапа
источник
Это только функция HTML5?
John Naegle
Я бы сказал так, и я считаю, что это также требует конфигурации сервера (для настройки манифеста кеша приложения). Хотя этот ответ предлагает решение исходного вопроса, он скрывает тот факт, что очистить традиционный кеш браузера с помощью клиентского или серверного кода практически невозможно.
Эрик Фуллер
Кажется, что этот метод обходит кеш и обновляет содержимое, но когда страница перезагружается, она возвращается к ранее кэшированному содержимому.
Simpler
устарело в пользу сервисных работников developer.mozilla.org/en-US/docs/Web/HTML/…
nadav
2
сервис-
Тони
159

Браузер ни в коем случае не позволит вам очистить свой кеш. Если бы это было возможно, это было бы серьезной проблемой для безопасности. Этим можно очень легко злоупотребить - как только браузер поддерживает такую ​​«функцию», я удалю ее со своего компьютера.

Что вы можете сделать, так это указать ему не кэшировать вашу страницу, отправив соответствующие заголовки или используя эти метатеги:

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

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

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

Использование SSL также заставляет некоторые браузеры не использовать кеширование, если это явно не указано. См. Этот вопрос .

NullUserException
источник
8
Зачем мне очищать кеш своего веб-приложения, чтобы раздражать пользователей? Я хочу сделать это, чтобы очистить следы кешированных личных данных. Если я скажу браузеру не кэшировать, он должен будет запрашивать мегабайты данных на стороне клиента каждый раз при загрузке страницы, чего я не хочу делать.
Tower
27
никто бы не стал, потому что, очевидно, это было бы невозможно. Подобно тому, как вы не можете запускать скрипты в другом источнике, это не означает, что вы не можете запускать скрипт в своем источнике. Если вы не можете очистить кеш на удаленном источнике, это логично, но почему я не могу очистить кеш источника, в котором я выполняю код? Нет причин, почему бы не делать этого, поэтому я ищу решение, но похоже, что это невозможно. Если вам так любопытно, могу сказать, что у меня есть большое приложение с большим количеством CSS, HTML и JS, скомпилированное примерно до 6 МБ.
Tower
4
@rFactor Это слишком много.
NullUserException
14
Пожалуйста, объясните, как независимо от реализации это будет проблемой безопасности? Это можно безопасно реализовать.
Дэн
22
Может быть, я не выспался прошлой ночью, как это может быть проблемой безопасности, если веб-приложение может очищать ( не изменять ) кеш? Как вы могли это использовать?
Фолькер Э.
19

используйте сам html. Есть один прием, который можно использовать. Уловка состоит в том, чтобы добавить параметр / строку к имени файла в теге скрипта и изменить его при изменении файла.

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

Браузер интерпретирует всю строку как путь к файлу, даже если после символа "?" параметры. Итак, теперь происходит следующее: в следующий раз, когда вы обновляете файл, просто измените номер в теге скрипта на своем веб-сайте (пример <script src="myfile.js?version=1.0.1"></script>), и каждый пользовательский браузер увидит, что файл был изменен, и получит новую копию.

Joish
источник
1
для тех, кто использует какой-либо динамический язык на стороне сервера, если вы можете получить доступ к файлу ctime, (или mtime), вы можете просто добавить указанное время за ним. Например, в php,, myfile.js?v=<?=filectime('myfile.js');?>и у вас есть кеш автоматического обновления для ваших ресурсов.
Пьер-Антуан Гийом
Я использовал эту технику много дней. Но сегодня я заметил, что файл по-прежнему отображается из кеша даже после того, как я изменил часть версии. Я использовал Chrome. Это было видно даже после того, как я удалил файл с сервера. У кого-нибудь есть информация, почему это может не работать?
Tᴀʀᴇǫ Mᴀʜᴍᴏᴏᴅ
Этот трюк работает, stackoverflow.com/questions/1922910/…
Невин
9

Лучшая идея - создать файл js с именем + некоторый хеш с версией, если вам нужно очистить кеш, просто сгенерируйте новые файлы с новым хешем, это заставит браузер загружать новые файлы

Адмирал Дак
источник
6

Сначала я пробовал различные программные подходы в своем html, JS для очистки кеша браузера. В последней версии Chrome ничего не работает.

В итоге я получил .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>

Протестировано в Chrome, Firefox, Opera

Ссылка: https://wp-mix.com/disable-caching-htaccess/

rajagopalx
источник
1
Это лучшее исправление.
Танкер Naga
4

location.reload (истина); будет жестко перезагружать текущую страницу, игнорируя кеш.
Cache.delete () также можно использовать для новых Chrome, Firefox и Opera.

Джей Шах
источник
Эта функция не работает с Internet Explorer и Safari Browser. Не уверен, что работает с Microsoft Edge.
Любопытный разработчик
3

В Chrome вы сможете сделать это с помощью расширения для тестирования. Вам нужно запустить Chrome со следующими переключателями:

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

В консоли Chrome теперь вы можете делать следующее:

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

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

kakhkAtion
источник
2

//The code below should be put in the "js" folder with the name "clear-browser-cache.js"

(function () {
    var process_scripts = false;
    var rep = /.*\?.*/,
    links = document.getElementsByTagName('link'),
    scripts = document.getElementsByTagName('script');
    var value = document.getElementsByName('clear-browser-cache');
    for (var i = 0; i < value.length; i++) {
        var val = value[i],
            outerHTML = val.outerHTML;
        var check = /.*value="true".*/;
        if (check.test(outerHTML)) {
            process_scripts = true;
        }
    }
    for (var i = 0; i < links.length; i++) {
        var link = links[i],
        href = link.href;
        if (rep.test(href)) {
            link.href = href + '&' + Date.now();
        }
        else {
            link.href = href + '?' + Date.now();
        }
    }
    if (process_scripts) {
        for (var i = 0; i < scripts.length; i++) {
            var script = scripts[i],
            src = script.src;
            if (src !== "") {
                if (rep.test(src)) {
                    script.src = src + '&' + Date.now();
                }
                else {
                    script.src = src + '?' + Date.now();
                }
            }
        }
    }
})();
At the end of the tah head, place the line at the code below

    < script name="clear-browser-cache" src='js/clear-browser-cache.js' value="true" >< /script >

haimirick
источник
3
Непонятно, как работает этот ответ и чем он лучше многих существующих. Это можно было бы значительно улучшить,
описав,
Хотя это приветствуется, это не очищает кеш браузера, похоже, кеширует любые ссылки на данной странице, просто добавляя параметры.
Дэн Чейз
1

Теперь вы можете использовать Cache.delete ()

Пример:

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

Работает в Chrome 40+, Firefox 39+, Opera 27+ и Edge.

r.delic
источник
0

Представьте себе .js файлы помещены в/my-site/some/path/ui/js/myfile.js

Обычно тег скрипта выглядит так:

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

Теперь измените это на:

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

Теперь, конечно, это не сработает. Чтобы он заработал, вам нужно добавить одну или несколько строк в вашу .htaccess Важную строку: (весь .htaccess внизу)

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

Итак, что это делает, это как бы удаляет 1111111111из пути и ссылается на правильный путь.

Итак, теперь, если вы внесете изменения, вам просто нужно изменить номер 1111111111 на любое число, которое вы хотите. И как бы вы ни включали свои файлы, вы можете установить это число с помощью метки времени, когда js-файл был последний раз изменен. Так что кеш будет нормально работать, если номер не изменится. Если он изменится, он будет обслуживать новый файл (ДА ВСЕГДА), потому что браузер получает полный новый URL-адрес и просто считает, что файл настолько новый, что он должен пойти и получить его.

Вы можете использовать это для того CSS, faviconsчто когда-либо будет кэшироваться. Для CSS просто используйте так

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

И будет работать! Легко обновлять, просто поддерживать.

Обещанный полный .htaccess

Если у вас еще нет .htaccess, это минимум, который вам нужен:

<IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteBase /

    RewriteRule ^my-site\/(.*)\/ui\-([0-9]+)\/(.*) my-site/$1/ui/$3 [L]
</IfModule>
Caramba
источник