Js очистить кэш браузера
Мы развернули последний код JavaScript, но мы не можем получить последний код JavaScript.
От редакции. Этот вопрос частично дублируется в следующих местах, и ответ на первый из следующих вопросов, вероятно, является лучшим. Этот принятый ответ больше не является идеальным решением.
Это смущает меня: «Мы развернули последний код JavaScript, но мы не смогли получить последний код JavaScript»
Я предполагаю, что вы имеете в виду, как заставить клиентские браузеры использовать вашу последнюю версию javascript, а не их кэшированную версию - в этом случае вам нужен ответ Грега. Если вы хотите знать, как это сделать в своем браузере, это ответ Дэвида Джонстона.
Обычный подход заключается в том, чтобы прикрепить ?version=xxx файлы к связанным JS-файлам на этапе сборки. Каждая новая сборка будет запрашивать новую версию файла JS.
@JuanMendes Это не всегда работает. Этот же шаг предлагается, когда люди сталкиваются с проблемами, пытаясь увидеть последний значок. Это просто не гарантировано работать.
Вы можете вызвать window.location.reload (true), чтобы перезагрузить текущую страницу. Он будет игнорировать любые кэшированные элементы и получать новые копии страницы, CSS, изображений, JavaScript и т. Д. С сервера. Это не очищает весь кеш, но имеет эффект очистки кеша для страницы, на которой вы находитесь.
Однако вашей лучшей стратегией является создание версии пути или имени файла, как указано в различных других ответах. Кроме того, см. Revving Filenames: не используйте строку запроса по причинам, которые не следует использовать в ?v=n качестве схемы управления версиями.
Вау, спасибо! Это хорошо работает и для кеша приложений HTML5, загруженного из файла cache.manifest. У меня был старый манифест, который не удалялся из памяти, поэтому один браузер, в котором он был кэширован, просто не отображал новые файлы. Я набрал это в консоли javascript и работал нормально. Спасибо!
но с изменением имени файла . разве вы не сохраните все предыдущие версии на месте? в противном случае вы получите много неудачных попыток от поисковых систем и что не читать старые версии (или закладки / связанные изображения)
@Manuel Отключит доступ к странице только из кеша того URL, который вы назвали location.reload (true). Он никогда не удаляет исходную страницу из кэша, так как он просто добавляет метку времени к новому запросу, и если на этой странице выполняются другие вызовы, выполняемые асинхронно, эти запросы НЕ будут отключены. Например. Если вы обновите страницу с помощью reload (true), которая загружает некоторый html, и на этой странице есть скрипт, который выполняет второй вызов ajax для отображения большего количества html на той же странице, во втором запросе не будет отключено кэширование.
Вы не можете очистить кеш с помощью JavaScript. Распространенным способом является добавление номера редакции или последней обновленной метки времени в файл, например так:
Однако обратите внимание, что многие прокси не будут кэшировать файл, когда у него есть строка запроса Смотрите ответ Кевина Хакансона .
Как я могу очистить кеш, когда весь HTML был кэширован? Это не повлияет, даже если номер версии добавлен из-за кэшированного HTML. Помогите
Если я не могу очистить элемент кэша, то почему MDN говорит, что я могу? Чего мне не хватает? Я попробовал то, что говорит MDN, но не повезло.
Попробуйте изменить src файла JavaScript? Из этого:
Этот метод должен заставить ваш браузер загрузить новую копию файла JS.
Помимо кэширования каждый час или каждую неделю, вы можете кэшировать в соответствии с данными файла.
или даже использовать время модификации файла:
Могу ли я проверить, правильно ли я понимаю? С опцией 1 при изменении файла изменяется хэш контрольной суммы md5, который затем изменяет URL-адрес. Браузер видит новый URL и запускает новую загрузку файла. Полученные данные, добавленные к URL, игнорируются сервером. Если это так, чертовски приятно.
Кроме того, интенсивно ли использует MD5 весь файловый процессор? Я подумываю о том, чтобы сделать это для файлов css и js навсегда, но я не хотел бы видеть снижение скорости сервера из-за этого.
Использование контрольной суммы - хорошая идея, но это должно быть сделано правильно. Вычисляя его, каждый запрос для каждого файла значительно снизит вашу производительность. Querystring не подходит для кеширования, смотрите другие ответы. Правильное использование - добавить контрольную сумму (часть?) Или номер версии к имени файла и использовать вместо этого это новое имя (вы можете использовать скрипт сборки, чтобы сделать это автоматически при развертывании). Смотри ворчание , рев и усмин .
Вы также можете принудительно перезагружать код каждый час, например, в PHP:
@GMsoF - это просто дополнительный параметр get, который используется (в данном случае), чтобы сообщить браузеру, что это «другой» файл. Так что браузер откажется от кэшированной версии и загрузит эту. Это часто используется с «последней датой изменения» файла. Я надеюсь, что это имеет смысл ;-)
поместите это в конце вашего шаблона:
попробуйте использовать это
Вот фрагмент того, что я использую для своего последнего проекта.
Наш процесс публикации генерирует файл с номером ревизии текущей сборки. Это работает с помощью URL, кодирующего этот файл и использующего его в качестве кеша. В случае отработки отказа, если этот файл не существует, используются год и номер недели, чтобы кэширование продолжало работать, и оно будет обновляться не реже одного раза в неделю.
Кроме того, это обеспечивает очистку кеша при каждой загрузке страницы в среде разработки, поэтому разработчикам не нужно беспокоиться об очистке кеша для любых ресурсов (вызовов javascript, css, ajax и т. Д.).
или вы можете просто прочитать js файл сервером с помощью file_get_contets, а затем добавить в заголовок echo содержимое js
Возможно, «очистка кеша» не так проста, как должна быть. Вместо очистки кеша в моих браузерах я понял, что «касание» файла фактически изменит дату кеширования исходного файла на сервере (проверено на Edge, Chrome и Firefox), и большинство браузеров автоматически загрузят самую свежую свежую копию что на вашем сервере (код, графика и любые мультимедиа тоже). Я предлагаю вам просто скопировать самые последние сценарии на сервере и решить проблему "сделать что-то на ощупь" перед запуском вашей программы, поэтому она изменит дату всех ваших проблемных файлов на самую последнюю дату и время, а затем загрузит свежую копию в ваш браузер:
. остальная часть вашей программы .
Мне потребовалось некоторое время, чтобы решить эту проблему (поскольку многие браузеры по-разному работают с разными командами, но все они проверяют время файлов и сравнивают их с загруженной в браузере копией, если обновление даты и времени выполнят обновление), если вы не может идти по правильному пути, всегда есть другое полезное и лучшее решение. С наилучшими пожеланиями и счастливого кемпинга.
Мне нравится этот подход, но, возможно, я реализую это в неправильной области? Кто-нибудь знает, где добавить это в настройке WordPress? Я добавил его в файл functions.php с прямыми ссылками на файлы JavaScript и CSS, но мне все равно пришлось сделать перезагрузку, чтобы заметить изменения.
То, что вам нужно сделать, находится в вашем главном html-каталоге WordPress, отредактируйте ваш index.php для вызова или выполните команду Touch () для файлов, которые вам нужно обновить и загрузить. У меня были проблемы с небольшими фото и js-файлами, которые застряли в кеше. Я пробовал большинство методов, описанных для освобождения из памяти, но лучший способ - загрузить текущий свежий правильный. Вы можете сделать это, просто выполнив «Touch Thing», так как он ничего не изменяет в файле, просто обновляет текущее время и дату, поэтому обманывает ваш браузер, думая, что его другая версия файла и проблема исправлены. Работает в большинстве браузеров
У меня были некоторые проблемы с кодом, предложенным yboussard. Внутренняя J-петля не работает. Вот модифицированный код, который я использую с успехом.
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.
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
We deployed the latest JavaScript code but we are unable to get the latest JavaScript code.
Editorial Note: This question is semi-duplicated in the following places, and the answer in the first of the following questions is probably the best. This accepted answer is no longer the ideal solution.
This confuses me: "We deployed the latest javascript code but we unable to get the latest javascript code"
I guess you mean, how to force client browsers to use your latest version of javascript and not their cached version - in that case you need Greg's answer. If you want to know how to do it in your own browser, it's David Johnstone's answer.
A common approach is to attach a ?version=xxx to your JS linked files through a build step. Every new build will request a new version of the JS file.
@JuanMendes This does not always work. This same step is suggested when people have issues trying to see the latest favicon. It's just not guaranteed to work.
23 Answers 23
Update: See location.reload() has no parameter for background on this nonstandard parameter and how Firefox is likely the only modern browser with support.
You can call window.location.reload(true) to reload the current page. It will ignore any cached items and retrieve new copies of the page, css, images, JavaScript, etc from the server. This doesn't clear the whole cache, but has the effect of clearing the cache for the page you are on.
However, your best strategy is to version the path or filename as mentioned in various other answers. In addition, see Revving Filenames: don’t use querystring for reasons not to use ?v=n as your versioning scheme.
Wow, thanks! This works well for an HTML5 Application Cache loaded from a cache.manifest file as well. I had an old manifest that wasn't being removed from memory, so one browser that had it cached just wouldn't show newer files. I typed this in the javascript console, and worked fine. Thanks!
but revving by changing the filename. won't that have you keep all the previous versions in place? otherwise you'll get a lot of failed attempts from search engines and what not to read the older versions (or bookmarked/linked images)
@Manuel It will only disable accessing the page from cache of the exact url that you called location.reload(true) on. It never clears the original page from the cache as it simply appends a time stamp to the new request, and if there are other calls made asynchronously by this page, those requests will NOT have their caching behaviors disabled. Eg. If you refresh a page with reload(true) that loads some html, and that page has a script that makes a second ajax call for more html to display on the same page, the second request will not have its caching disabled.
You can't clear the cache with javascript. A common way is to append the revision number or last updated timestamp to the file, like this:
Note however that many proxies won't cache a file when it has a query string. See answer of Kevin Hakanson.
How can i clear the cache when the entire HTML has been cached ? It wont affect even when the version number is added because of cached HTML.Please help
If I can't clear a cache item, then why does MDN say that I can? What am I missing? I tried what MDN says but no luck.
Try changing the JavaScript file's src? From this:
This method should force your browser to load a new copy of the JS file.
Other than caching every hour, or every week, you may cache according to file data.
or even use file modification time:
Can I verify I understand this correctly?: With option 1, when the file changes, the md5 checksum hash changes, which then changes the url. The browser sees a new url and initiates a fresh load of the file. The get data appended to the url is ignored by the server. If that's the case, pretty damn slick.
Also, is MD5-ing an entire file processor intensive? I'm considering doing this for ever css and js file, but I'd hate to see a hit to server speed on account of this.
Using a checksum is a good idea, but it should be done right. Calculating it every request for every file will hit your performance significantly. Querystring is not good for caching too, see other answers. The right usage is to append a checksum (part of?) or version number to the filename and use this new name instead (you can use a build script to do this automagically on deploy). See grunt, rev and usemin.
You can also force the code to be reloaded every hour, like this, in PHP :
@GMsoF that is just an additional get parameter which is used (in this case) to tell the browser it is a "different" file. So that the browser will discard the cached version and load this one instead. This is often used with the "last modified date" of a file. I hope this makes sense ;-)
window.location.reload(true) seems to have been deprecated by the HTML5 standard. One way to do this without using query strings is to use the Clear-Site-Data header, which seems to being standardized.
This solution, especially with the additional alternative approaches listed in the linked article, is the best one. The other answers forget that our users already have a cached version of the file and we need to forcefully bypass that cache barrier.
put this at the end of your template :
Here's a snippet of what I'm using for my latest project.
From the controller:
Our publishing process generates a file with the revision number of the current build. This works by URL encoding that file and using that as a cache buster. As a fail-over, if that file doesn't exist, the year and week number are used so that caching still works, and it will be refreshed at least once a week.
Also, this provides cache busting for every page load while in the development environment so that developers don't have to worry with clearing the cache for any resources (javascript, css, ajax calls, etc).
or you can just read js file by server with file_get_contets and then put in echo in the header the js contents
Maybe "clearing cache" is not as easy as it should be. Instead of clearing cache on my browsers, I realized that "touching" the file will actually change the date of the source file cached on the server (Tested on Edge, Chrome and Firefox) and most browsers will automatically download the most current fresh copy of whats on your server (code, graphics any multimedia too). I suggest you just copy the most current scripts on the server and "do the touch thing" solution before your program runs, so it will change the date of all your problem files to a most current date and time, then it downloads a fresh copy to your browser:
. the rest of your program.
It took me some time to resolve this issue (as many browsers act differently to different commands, but they all check time of files and compare to your downloaded copy in your browser, if different date and time, will do the refresh), If you can't go the supposed right way, there is always another usable and better solution to it. Best Regards and happy camping.
I like this approach, but perhaps I am implementing this in the wrong area? Does anyone know where to add this in a WordPress setup? I added it to the functions.php file, with direct links to the JavaScript and CSS files, but I still had to do a hard reload for the changes to be noticed.
What you need to do, is at your main html wordpress directory, edit your index.php to call or execute the Touch() command to the files that you need to be refresh and downloaded. I had problems with small pics and js files that got stuck in cache. I tried most methods described to release from memory, but the best way is to load a current fresh correct one. You can acomplish that by just doing the "Touch Thing" as it doesnt modify anything on the file, just updates the current time and date so fools your browser to think its another version of the file and problem fixed. Works on most browsers
You can also disable browser caching with meta HTML tags just put html tags in the head section to avoid the web page to be cached while you are coding/testing and when you are done you can remove the meta tags.
(in the head section)
Refresh your page after pasting this in the head and should refresh the new javascript code too.
or you can just create a button like so
it refreshes and avoid caching but it will be there on your page till you finish testing, then you can take it off. Fist option is best I thing.
Статья состоит из двух частей: теоретической и практической.
В теоретической части мы кратко рассмотрим карту импортов и более подробно Clear-Site-Data .
В практической части мы поднимем два сервера — один будет запускаться локально и, помимо прочего, обслуживать статические файлы нашего приложения, другой мы развернем на Heroku . Сначала мы запросим данные (включая куки) от серверов, сохраним эти данные в браузере с помощью трех наиболее популярных механизмов (локальное хранилище, индексированная база данных и интерфейс кеширования), затем попробуем очистить их с помощью заголовков Clear-Site-Data . Для разрешения путей импортируемых в приложении модулей мы будем использовать карту импортов.
Исходный код проекта находится здесь.
Ресурсы
О механизмах для хранения данных на стороне клиента, которые мы будем использовать в приложении, я рассказывать не буду. Вот ссылки на отличные ресурсы, посвященные каждому из них:
Инструменты
При разработке приложения мы будем использовать несколько инструментов, основными из которых являются следующие:
Теория
Карта импортов
Карта импортов (imports map) позволяет использовать так называемые голые спецификаторы импорта (bare import specifiers) в инструкциях import и выражениях import() без участия сборщиков типа Webpack или других инструментов для разрешения путей импортируемых модулей во время выполнения кода.
Предположим, что в нашем проекте используются библиотека lodash и утилита very-simple-fetch :
Для того, чтобы импортировать эти модули без помощи "бандлера", необходимо указать полный путь к соответствующим файлам, хранящимся в директории node_modules :
Карта импортов позволяет связать кастомные ключи — названия модулей — с их расположением. Для этого в теге с типом importmap определяется объект с ключом imports и парами ключ / значение, где значение — это путь к модулю, а ключ — синоним (алиас) для этого пути:
После определения карты импортов, у нас появляется возможность импортировать наши модули следующим образом:
Карты импортов также предоставляют много других интересных возможностей. К сожалению, в настоящее время они поддерживаются только Chrome . Если вы пользуетесь другим агентом, при разработке приложения в практической части статьи импортируйте модули напрямую из node_modules .
Clear-Site-Data
Данный заголовок принимает следующие директивы:
Директивы могут указываться как по одной:
так и через запятую:
Последний пример аналогичен следующему:
К сожалению, в настоящее время данный заголовок не поддерживается Safari (ох уж этот современный IE :)).
Вот как это должно работать в теории. Скоро мы выясним, что на практике это работает немного по-другому, а кое-что и вовсе не работает.
Практика
Фронтенд и локальный сервер
Создаем директорию для проекта, переходим в нее, инициализируем проект и устанавливаем зависимости:
Создаем файл 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 .
Удаленный сервер
Начнем с самого сервера. Создаем для него директорию, переходим в нее, инициализируем проект и устанавливаем зависимости:
Определяем команду для запуска сервера в 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:
К сожалению, по этой проблеме информации найти не удалось. Если вдруг вы знаете, в чем дело, пожалуйста, сообщите в комментариях.
Вывод
Итак, что мы имеем в сухом остатке?
Карта импортов в настоящее время поддерживается только Chrome . Будет ли она поддерживаться другими браузерами, и, если будет, когда это произойдет, неизвестно. Поэтому, несмотря на интересные возможности, использовать ее при разработке реальных приложений пока нельзя.
Что касается заголовка Clear-Site-Data , то, в целом, он неплохо справляется со своей задачей, однако тот факт, что он не поддерживается Safari , а также учитывая баг в Chrome и не очень понятное поведение браузеров по очистке кешированных данных, говорить о возможности его использования в продакшне также преждевременно.
многие знают что кеш очищается когда изменяется страница, но мне известен способ который перезагружает страницу, есть другие способы?
- Вопрос задан более трёх лет назад
- 991 просмотр
Простой 24 комментария
Кэш который сохраняет переменную? Как это вообще? А главное, зачем?
Или я не правильно понял вопрос?
habrdima, а вы понятнее можете описать проблему?
Вот это — «кеш который сохроняет getElementById?» — многим, включая меня, непонятно.
habrdima, так вы же сами пишете "пока документ как-нибудь не изменится". Зачем Вам до сего момента чистить кэш?
Interface, это учебник пишет, но вот что за изменения должны быть кроме перезагрузки, что бы кеш был стерт, я не догоняю, простые изменения типа перестоновки, добовления, не трогают этот кеш
Сергей, вот не понимаю я многих прогеров, уже давно изучаю язык и знаю что там полно универсального, бывают неоднозначные моменты, но много чего универсального, и когда задаешь вопрос казалось бы на понятную тему, а задаешь его по многим причинам, например прост мозги забуксовали или нюанс пропустил какой. вечно просят все им выложить(
когда спрашивают как человек жует, а ему в ответ, а что он жует? как будто не понятно, что спрашивают в целом и основное, остальное потом при необходимости можно уточнить
habrdima, тебя не смущает что на «вопрос казалось бы на понятную тему» за четыре часа нет ни одного ответа?
Может быть проблема всё-таки не в прогерах, которые могли бы ответить, а в неполной (неясной, неточной) постановке вопроса?
Сергей, что за мир? или так или так, других вариантов быть не может? лучше бы написал, код обнуления переменной, что я спросил, чем все эти вопросы, намного больше было бы помощи
Кстати, по вашей ссылке на учебник, кэшируется querySelector, а не getElementById.
Не могли бы объяснить, на основании чего, вы делаете такой вывод? В идеале конечно код или хотя бы объяснение словами. Если вы вдруг используете (не известно откуда взявшийся) метод isGetElementByIdCacheEmpty (или что-то вроде того) буду рад увидеть ссылку на его спецификацию! (возможно там рядом лежит clearGetElementByIdCache :) )
Interface, решение своей задачи я нашел сам, без очистки кеша, но вопрос был про кеш, из учебника я понял что id тоже кешируется, если это не так то прошу прощения за свою ошибку, если так то вопрос этот же про querySelector,
вывод делаю основываясь на тестах, но долго описывать, код не мой и еще больше)
Читайте также: