Хром сбросить кэш js
Читайте статью, если ещё не знаете, как чистить кэш в Google Chrome. Мы расскажем, что такое кэширование, чем кэш отличается от истории посещений и какие есть способы очистить кэш браузера Гугл Хром.
Как удалить кэш в Google Chrome?
Избавление от кэша в браузере Chrome осуществляется очень просто. Чтобы выполнить эту процедуру:
Готово. Вот так просто осуществляется очистка кэша в Chrome. Как видите, ничего сложно тут нет.
Хотя существует более простой способ сбросить кэш в Chrome:
И самый простой способ: нажать Ctrl+Shift+Del, поставить галочку в 4-ом пункте и нажать кнопку «Очистить историю».
Инструменты
При разработке приложения мы будем использовать несколько инструментов, основными из которых являются следующие:
Ресурсы
О механизмах для хранения данных на стороне клиента, которые мы будем использовать в приложении, я рассказывать не буду. Вот ссылки на отличные ресурсы, посвященные каждому из них:
Как очистить кэш отдельного сайта в Гугл Хроме?
Теперь рассмотрим, как очистить кэш сайта в Chrome. Данная процедура тоже выполняется очень просто:
Готово. Вот таким образом можно удалить кэш в Chrome для одного отдельного сайта. При необходимости данную процедуру следует проделать и для других сайтов.
На этом все. Теперь Вы знаете, каким образом очистить кэш браузера Google Chrome и легко сможете это сделать. В первую очередь данную процедуру рекомендуется выполнять для сайтов, которые кардинально изменили свой дизайн. Ведь Гугл Хром будет загружать старые файлы, сохраненные на локальном диске C, и Вы не увидите новых изменений. Также желательно периодически (например, раз в месяц) удалять его ради экономии места на компьютере или ноутбуке.
Зачем нужно кэширование
В общем смысле кэш — это специальная область на диске или операционной системе, в которой временно хранится информация и данные, к которым обращался пользователь. Если говорить по-простому, это кратковременная память устройства.
Кэш браузера позволяет быстрее получить доступ к информации (страницам на сайте или в социальных сетях, просмотренным видео и др.), которую пользователь недавно просматривал. Дело в том, что браузер обращается за информацией не напрямую к серверу, на котором хранятся данные (долгий способ), а берет информацию напрямую из своей памяти (быстрый способ).
Не стоит путать кэш с историей посещений и файлами cookie. В истории можно посмотреть список всех сайтов,посещенных за тот или иной период. Файлы cookie сохраняют небольшие фрагменты данных (например, пароли или email) и автоматически подставляют их в нужный момент. В кэше же хранится техническая информация о страницах сайта (картинках, скриптах и другом) .
Однако иногда кэш скорее мешает, чем помогает в работе. Если в буфере накапливается слишком много информации, то страницы начинают загружаться медленнее. Также информация из кэша может быть уже неактуальной. Например, вы хотели перейти на какой-то интернет-ресурс, но столкнулись с ошибкой. Браузер запомнит страницу в текущем виде и при повторном входе также отобразит ошибку, даже если работа ресурса уже восстановлена. По этим причинам временную память браузера необходимо регулярно чистить.
Практика
Теория
Способ 4. Через программы
Ещё один из способов — бесплатные программы для компьютера, которые чистят временную память. Самые популярные: Clean Master, CCleaner — для Windows, BleachBit, Stacer — для Linux, App Store и CCleaner — для macOS.
Главным образом эти программы ориентированы на то, чтобы просканировать компьютер на вирусы и очистить операционную систему от различного «мусора» — логов, временных файлов и другого. А также проверить, сколько места в системе занимают такие файлы и как влияют на работоспособность операционной системы.
Если вы регулярно чистите файлы сайта на своём компьютере, можно установить одну из программ — они помогут попутно очистить и кэш.
В блоке «Google Chrome» поставьте галочки напротив нужных параметров и кликните Очистка:
Теперь вы знаете, как очистить кэш в Хроме и сможете выбрать наиболее подходящий вам способ.
Для тех, кто не в курсе: браузер многое кэширует. Что это, поясню на примере: при первом посещении сайта, браузером загружаются картинки с сайта, видео, другие файлы (стили, скрипты). Все эти файлы имеют размер и чтобы при переходе со страницы на страницу не загружать одинаковые файлы, браузер сохраняет их в своей памяти (на диске компьютера) и в дальнейшем берет их от туда. Такая процедура называется кэшированием.
Иногда нужно очистить кэш сайта, например, это нужно, когда над сайтом проводятся работы и меняются статические файлы. Внесенные изменения не видны из-за того, что вы видите не реальный файл а файл из кэша браузера. Чтобы видеть реальную картину, нужно очистить кэш. В Google Chrome есть возможность очистить кэш полностью. При такой очистке удаляется кэш всех сайтов которые вы посещали. Обычно при такой очистке удаляются все данные: куки, сохраненные с сайта картинки и другие статические файлы, история посещений и прочее.
Как очистить кэш браузера Google Chrome
Если у вас Google Chrome, вы можете очистить кэш одним из четырех способов. Два первых способа описывают, как очистить кэш хрома вручную. Третий и четвертый способы позволяют очистить кэш браузера Гугл Хром через расширения и на компьютере.
Полная очистка кэша браузера Google Chrome
Чтобы полностью очистить кэш Google Chrome нужно зайти в историю (Ctrl+H), затем нажать «очистить историю», в появившемся окне нажать «Очистить историю» (в этом же окне можно выбрать что именно очищать):
Фронтенд и локальный сервер
Создаем директорию для проекта, переходим в нее, инициализируем проект и устанавливаем зависимости:
Создаем файл server.js для локального сервера и директорию public для статических файлов, а в ней файлы index.html , style.css и script.js :
Не забудьте создать файл .gitignore с node_modules .
Начнем с public/index.html . Создаем контейнер для UI и секцию с кнопками для взаимодействия с локальным сервером:
Обратите внимание на атрибуты data-action кнопок. Это небольшая хитрость позволит нам сильно упростить и сократить код скрипта. А по классам, вы, наверное, догадались, какой CSS-фреймворк мы используем для стилизации.
Добавляем карту импортов для модулей very-simple-fetch и idb :
Честно говоря, поиск нужного файла в директории node_modules — занятие не из приятных. К тому же приходится искать не просто основной файл, но нужную версию файла. Например, ES-модуль idb хранится в директории esm .
Подключаем наш скрипт с типом module :
С вашего позволения файл со стилями style.css я пропущу.
Переходим к public/script.js .
Давайте подумаем, что должен делать наш скрипт.
Вот мои идеи на этот счет:
- записать данные в локальное хранилище
- записать данные в индексированную БД
- записать данные в кеш с помощью Cache API
- получить куки от локального сервера
- при нажатии кнопки отправлять на сервер запрос, в ответ на который сервер будет устанавливать заголовок Clear-Site-Data с соответствующей директивой.
Приступим к реализации ( // -> — означает сигнатуру):
Обратите внимание на то, как мы формируем URL запроса. Мы добавляем к адресу сервера значение атрибута data-action кнопки. Это первая половина хитрости.
Теперь займемся сервером ( server.js ).
Что он должен делать?
Я хочу, чтобы он делал следующее:
Мы передаем клиенту куки вместе с загружаемыми модулями. Получается, что мы делаем это дважды, но это не критично. Поскольку у нас один домен и названия куки совпадают, мы в итоге получим только одно куки.
Обратите внимание на то, как мы извлекаем тип операции — директиву для Clear-Site-Data — из тела запроса. Мы разбиваем строку в массив по символу - и извлекаем второй элемент (элемент по индексу 1). Таким образом, если сервер получил clear-storage , то типом операции (директивой) будет storage .
Также обратите внимание на то, что директива должна быть закавычена, причем кавычки обязательно должны быть двойными ( " ).
Пришло время запустить сервер и убедиться в том, что все работает.
Добавляем в файл package.json команду для запуска сервера для разработки:
Выполняем эту команду в терминале:
Открываем инструменты разработчика, переходим в раздел Application (“Приложение”) и проверяем, что все наши данные успешно сохранены в браузере:
Видим, что данные из локального хранилища, индексированной БД и локального кеша были успешно удалены.
Кажется, что все хорошо, однако нажатие кнопки Reload contexts приводит к возникновению ошибки:
Текст ошибки говорит нам о том, что браузер не может распознать тип операции (тип данных для очистки).
Дело в том, что директива "executionContexts" в настоящее время поддерживается только Samsung Internet , т. е. можно сказать, что не поддерживается. В сети можно найти информацию о том, что данная директива, скорее всего, будет удалена из спецификации.
Дальше интересней: нажатие кнопки Clear all site data также приводит к ошибке:
Хотя должно приводить к очистке данных всех типов.
Здесь мы имеем дело с багом Chrome . Вот все, что мне удалось найти по данному багу. Кажется, в ближайшее время никто не собирается его фиксить.
В Firefox это работает:
Кажется, что эти директивы правильно интерпретируются браузером, т. е. приводят к очистке данных указанного типа.
Но что насчет определения принадлежности данных к источнику ответа перед их очисткой? Для того, чтобы убедиться в том, что удаляются только такие данные необходимо поднять еще один сервер. Для чистоты эксперимента развернем этот сервер на Heroku .
Способ 1. С помощью горячих клавиш
Это самый простой и быстрый способ. Чтобы использовать его, достаточно запомнить несложную комбинацию клавиш на клавиатуре.
В браузере наберите сочетание клавиш Ctrl + Shift + Delete. После этого в настройках автоматически откроется страница «Очистить историю».
Отметьте чекбокс «Изображения и другие файлы, сохраненные в кеше». Затем в выпадающем списке выберите нужный временной диапазон:
Кликните Удалить данные:
Очистка кэша отдельного сайта в Google Chrome (выборочная очистка)
Иногда нет необходимости очищать весь кэш, в нем все-таки многое сохраняется и это многое создает много удобства. Например, авторизация на некоторых сайтах, история поиска и т.д. Но при этом нужно удалить кэш отдельного сайта. Сделать это можно так:
- Откройте инструменты разработчика: Ctrl+Shift+I
- Теперь, оставив панель открытой, кликните левой кнопкой мыши на кнопку «Обновить» (рядом со строкой адреса) и не отпускайте кнопку.
- Через несколько секунд вы увидите выпадающее меню в котором будет пункт: Очистка кэша и аппаратная перезагрузка.
Чтобы перезагрузить страницу без использования файлов кэша, можно воспользоваться комбинацией клавиш Ctrl+F5 или Ctrl+Shift+R .
I am looking for a way to programmatically empty the browser cache. I am doing this because the application caches confidential data and I'd like to remove those when you press "log out". This would happen either via server or JavaScript. Of course, using the software on foreign/public computer is still discouraged as there are more dangers like key loggers that you just can't defeat on software level.
Which browsers? You should also look at telling the browser what not to cache from the server vs. trying to erase it.
@MechSoftware I want to cache for faster page loads, but I want to clear it after log off. Preferably as good browser support as possible.
Вывод
Итак, что мы имеем в сухом остатке?
Карта импортов в настоящее время поддерживается только Chrome . Будет ли она поддерживаться другими браузерами, и, если будет, когда это произойдет, неизвестно. Поэтому, несмотря на интересные возможности, использовать ее при разработке реальных приложений пока нельзя.
Что касается заголовка Clear-Site-Data , то, в целом, он неплохо справляется со своей задачей, однако тот факт, что он не поддерживается Safari , а также учитывая баг в Chrome и не очень понятное поведение браузеров по очистке кешированных данных, говорить о возможности его использования в продакшне также преждевременно.
Есть 2 простых способа, как очистить кэш в бразере Хром. Первый – это полная очистка, а второй – для одного конкретного сайта. Сброс кэша осуществляется в самом браузере Гугл Хром. Поэтому никаких дополнительных программ не нужно.
Что такое кэш? Это временные файлы, которые загружаются браузером и сохраняются на компьютере. Их наличие ускоряет открытие ранее посещенных страниц.
Например, Вы первый раз посетили какой-то сайт, и все картинки, видео, скрипты и стили с него сохранились на ваш компьютер. Когда вы зайдете на него повторно, то все эти файлы уже не будут загружаться – браузер возьмет их из кэша, который хранится на локальном диске C. В результате сайт откроется быстрее, чем в первый раз.
Кэш браузера постоянно увеличивается и через некоторое время может занимать много места. Поэтому, если Вы обнаружили, что на локальном диске C осталось мало свободного места – самое время очистить кэш браузера Chrome. Особенно, если давно этого не делали.
Кстати, очень часто пользователи считают, что кэш и история посещений это одно и то же. Но это совершенно разные понятия. В истории хранится список посещенных ранее вами сайтов, а в кэше – техническая информация (картинки, видео, скрипты, стили), которая ускоряет их загрузку.
Clear-Site-Data
Данный заголовок принимает следующие директивы:
Директивы могут указываться как по одной:
так и через запятую:
Последний пример аналогичен следующему:
К сожалению, в настоящее время данный заголовок не поддерживается Safari (ох уж этот современный IE :)).
Вот как это должно работать в теории. Скоро мы выясним, что на практике это работает немного по-другому, а кое-что и вовсе не работает.
Карта импортов
Карта импортов (imports map) позволяет использовать так называемые голые спецификаторы импорта (bare import specifiers) в инструкциях import и выражениях import() без участия сборщиков типа Webpack или других инструментов для разрешения путей импортируемых модулей во время выполнения кода.
Предположим, что в нашем проекте используются библиотека lodash и утилита very-simple-fetch :
Для того, чтобы импортировать эти модули без помощи "бандлера", необходимо указать полный путь к соответствующим файлам, хранящимся в директории node_modules :
Карта импортов позволяет связать кастомные ключи — названия модулей — с их расположением. Для этого в теге с типом importmap определяется объект с ключом imports и парами ключ / значение, где значение — это путь к модулю, а ключ — синоним (алиас) для этого пути:
После определения карты импортов, у нас появляется возможность импортировать наши модули следующим образом:
Карты импортов также предоставляют много других интересных возможностей. К сожалению, в настоящее время они поддерживаются только Chrome . Если вы пользуетесь другим агентом, при разработке приложения в практической части статьи импортируйте модули напрямую из node_modules .
Способ 3. С помощью расширений браузера
Чтобы очистить память, можно также использовать специальные расширения для браузера. Например, OneCleaner, Clean Guru или Clean Master. Они работают так же, как утилиты для компьютера, но при этом встроены в браузер.
Чтобы очистить кэш с помощью расширения:
Выберите нужный период:
Кликните Очистка:
Способ 2. Через браузер
Этот способ более долгий, чем первый, но он не требует запоминания комбинации клавиш на клавиатуре.
В браузере нажмите на кнопку с тремя точками. Затем кликните Настройки:
Пролистайте страницу до раздела «Конфиденциальность и безопасность» и нажмите Очистить историю:
Отметьте чекбокс «Изображения и другие файлы, сохраненные в кеше». Затем выберите нужный временной диапазон в выпадающем списке:
Кликните Удалить данные:
13 Answers 13
There's no way a browser will let you clear its cache. It would be a huge security issue if that were possible. This could be very easily abused - the minute a browser supports such a "feature" will be the minute I uninstall it from my computer.
What you can do is to tell it not to cache your page, by sending the appropriate headers or using these meta tags:
You might also want to consider turning off auto-complete on form fields, although I'm afraid there's a standard way to do it (see this question).
Regardless, I would like to point out that if you are working with sensitive data you should be using SSL. If you aren't using SSL, anyone with access to the network can sniff network traffic and easily see what your user is seeing.
Using SSL also makes some browsers not use caching unless explicitly told to. See this question.
Why would I clear the cache of my web app to annoy my users? I want to do that to clear traces of cached private data. If I tell the browser not to cache, it has to request megabytes of client-side data every time the page loads, which is neither want I want to do.
no one would, because obviously it would not be possible. Just like you can't run scripts on another origin does not mean you can't run a script on your origin. If you can't clear cache on a remote origin, that's logical, but why could I not clear cache of the origin I am executing the code? There's no reason why not to, so I am looking if there's a solution to that, but it looks like it's not possible. If you are so curious I can tell you that I have a large application with a lot of CSS, HTML and JS compiled to about 6 MB.
Please explain how no matter the implementation, this would be a security issue? This could be implemented safely.
Maybe I didn't get enough sleep last night, in what ways would it be a security issue, when a web app could clear (not alter) cache? How could you exploit that?
It's possible, you can simply use jQuery to substitute the 'meta tag' that references the cache status with an event handler / button, and then refresh, easy,
NOTE: This solution relies on the Application Cache that is implemented as part of the HTML 5 spec. It also requires server configuration to set up the App Cache manifest. It does not describe a method by which one can clear the 'traditional' browser cache via client- or server-side code, which is nigh impossible to do.
I would say so, and I believe it also it also requires server configuration (to set up the app cache manifest). While this answer offers a solution to the original question, it obscures the fact that it's nigh impossible to clear the traditional browser cache via client- or server-side code.
This method seems to bypass the cache and update the content, but when the page is reloaded, it goes back to the previously cached content.
use html itself.There is one trick that can be used.The trick is to append a parameter/string to the file name in the script tag and change it when you file changes.
The browser interprets the whole string as the file path even though what comes after the "?" are parameters. So wat happens now is that next time when you update your file just change the number in the script tag on your website (Example ) and each users browser will see the file has changed and grab a new copy.
for those using some server-side dynamic language, if you can access the file's ctime , (or mtime ), you can just add said time behind it. For instance in php, myfile.js?v= , and there you've got yourself an auto updating cache for your resources.?=filectime('myfile.js');?>
I was using this technique for many days. But I noticed today that, the file is still being rendered from cache even after I changed the version part. I was using Chrome. It was showing even after I deleted the file from the server. Anyone have any info why it may not work?
This is how I've done it ever since about 2002. It may be ugly, but it has always worked. Without brand new HTML 5.0 features, I think this was the ONLY way to be able to both cache a page and choose when to get a new copy (ie: bust the cache).
The best idea is to make js file generation with name + some hash with version, if you do need to clear cache, just generate new files with new hash, this will trigger browser to load new files
Initially I tried various programmatic approach in my html, JS to clear browser cache. Nothing works on latest Chrome.
Finally, I ended up with .htaccess:
Tested in Chrome, Firefox, Opera
Here is a single-liner of how you can delete ALL browser network cache using Cache.delete()
Works on Chrome 40+, Firefox 39+, Opera 27+ and Edge.
On Chrome, you should be able to do this using the benchmarking extension. You need to start your chrome with the following switches:
In Chrome's console now you can do the following:
As you can tell from above commands, it not only clears the browser cache, but also clears the DNS cache and closes network connections. These are great when you're doing page load time benchmarking. Obviously you don't have to use them all if not needed (e.g. clearCache() should suffice if you need to clear the cache only and don't care about DNS cache and connections).
location.reload(true); will hard reload the current page, ignoring the cache.
Cache.delete() can also be used for new chrome, firefox and opera.
This function do not work with Internet explorer and safari browser. Not sure if work with Microsoft Edge.
Works on Chrome 40+, Firefox 39+, Opera 27+ and Edge.
You could have the server respond with a Clear Site Data directive that instructs the user agent to clear the site's locally stored data.
That header would instruct the user agent to clear all locally stored data, including:
You can send the request using fetch() and do location.reload() afterwards to get a fresh restart.
It is unclear how this answer works and how it is better than the many existing answer. This could be greatly improved with a description of what approach you're following as well as supporting documentation that shows why that will work
While appreciated, this does not clear the browser cache, it seems to cache-bust any links on the given page just by adding params.
just iterate over list of link tags and script tags and append query param at end it loads. just simple as it
Imagine the .js files are placed in /my-site/some/path/ui/js/myfile.js
So normally the script tag would look like:
Now change that to:
Now of course that will not work. To make it work you need to add one or a few lines to your .htaccess The important line is: (entire .htaccess at the bottom)
So what this does is, it kind of removes the 1111111111 from the path and links to the correct path.
So now if you make changes you just have to change the number 1111111111 to whatever number you want. And however you include your files you can set that number via a timestamp when the js-file has last been modified. So cache will work normally if the number does not change. If it changes it will serve the new file (YES ALWAYS) because the browser get's a complete new URL and just believes that file is so new he must go get it.
You can use this for CSS , favicons and what ever gets cached. For CSS just use like so
Статья состоит из двух частей: теоретической и практической.
В теоретической части мы кратко рассмотрим карту импортов и более подробно Clear-Site-Data .
В практической части мы поднимем два сервера — один будет запускаться локально и, помимо прочего, обслуживать статические файлы нашего приложения, другой мы развернем на Heroku . Сначала мы запросим данные (включая куки) от серверов, сохраним эти данные в браузере с помощью трех наиболее популярных механизмов (локальное хранилище, индексированная база данных и интерфейс кеширования), затем попробуем очистить их с помощью заголовков Clear-Site-Data . Для разрешения путей импортируемых в приложении модулей мы будем использовать карту импортов.
Исходный код проекта находится здесь.
Удаленный сервер
Начнем с самого сервера. Создаем для него директорию, переходим в нее, инициализируем проект и устанавливаем зависимости:
Определяем команду для запуска сервера в package.json :
Создаем файл index.js следующего содержания:
- origin — заголовок Access-Control-Allow-Origin
- credentials — заголовок Access-Control-Allow-Credentials
- allowHeaders — заголовок Access-Control-Allow-Headers
Без этих настроек и еще одной на клиенте мы не сможем получить куки от "удаленного" сервера.
Для того, чтобы иметь возможность разворачивать приложения на Heroku , необходимо создать там аккаунт, а также глобально установить heroku-cli :
Инициализируем репозиторий и добавляем в него файлы приложения:
Создаем проект на Heroku :
Проверяем, что наш проект привязан к Heroku-проекту, и отправляем файлы:
Полную инструкцию по деплою приложения на Heroku можно найти здесь.
Добавляем в public/index.html раздел с кнопками для взаимодействия с удаленным сервером:
И вносим несколько изменений в public/script.js :
В разделе Application находим кешированные данные и куки от heroku:
И это не баг Chrome (или баг не только Chrome ), точно такой же результат мы получаем в Firefox :
Директива * также не удаляет кешированные данные, полученные от heroku:
К сожалению, по этой проблеме информации найти не удалось. Если вдруг вы знаете, в чем дело, пожалуйста, сообщите в комментариях.
Читайте также: