I am modifying a site&#39;s appearance (CSS modifications) but can&#39;t see the result on Chrome because of annoying persistent cache. I tried &lt;kbd&gt;Shift&lt;/kbd&gt;+refresh but it doesn&#39;t work.

How can I disable the cache temporarily or refresh the page in some way that I could see the changes?

Disabling Chrome cache for website development

The header `Cache-Control: max-age=0` implies that the content is considered stale (and must be re-fetched) immediately, which is in effect the same thing as `Cache-Control: no-cache`.

What&#39;s the difference between Cache-Control: max-age=0 and no-cache?

I recently discovered this new feature in Chrome:

![reload options][1]

I can figure out the difference between option 1 and option 3, and that option 2 is probably something in between, but I can&#39;t find any more precise information anywhere.

Anybody know the precise behavior of each of the 3 options?

  [1]: http://i.stack.imgur.com/nWcug.png

What&#39;s the difference between &quot;Normal Reload&quot;, &quot;Hard Reload&quot;, and &quot;Empty Cache and Hard Reload&quot; in Chrome?

It looks like if I load dynamic content using `$.get()`, the result is cached in browser.

Adding some random string in QueryString seems to solve this issue (I use `new Date().toString()`), but this feels like a hack. 

Is there any other way to achieve this?
Or, if unique string is the only way to achieve this, any suggestions other than `new Date()`?

 

Prevent browser caching of AJAX call result

How to enable browser caching for my site? Do I just put cache-control:public somewhere up in my header like this?

&lt;!-- language: lang-html --&gt;

    &lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot;
       &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;
    Cache-Control:public;
    &gt;

I am using the latest version of PHP developing on the latest version of XAMPP.

How to set HTTP headers (for cache-control)?

I have problem with caching partials in AngularJS.

In my HTML page I have:

    &lt;body&gt;
     &lt;div ng-view&gt;&lt;/div&gt;
    &lt;body&gt;

where my partials are loaded.

When I change HTML code in my partial, browser still load old data.

Is there any workaround?


AngularJS disable partial caching on dev machine

I am looking for a method to disable the browser cache for an **entire ASP.NET MVC Website**

I found the following method:

    Response.Cache.SetCacheability(System.Web.HttpCacheability.NoCache);
    Response.Cache.SetNoStore();

And also a meta tag method (it won&#39;t work for me, since some MVC actions send partial HTML/JSON through Ajax, without a head, meta tag).

    &lt;meta http-equiv=&quot;PRAGMA&quot; content=&quot;NO-CACHE&quot;&gt;

But I am looking for a simple method to disable the browser cache for an entire website.


Disable browser cache for entire ASP.NET website

Do browsers (IE and Firefox) parse linked javascript files every time the page refreshes?

They can cache the files, so I&#39;m guessing they won&#39;t try to download them each time, but as each page is essentially separate, I expect them to tear down any old code and re-parse it.

This is inefficient, although perfectly understandable, but I wonder if modern browsers are clever enough to avoid the parsing step within sites. I&#39;m thinking of cases where a site uses a javascript library, like ExtJS or jQuery, etc.

Do browsers parse javascript on every page load?

When I visit [chesseng.herokuapp.com][1] I get a response header that looks like

    Cache-Control:private
    Connection:keep-alive
    Content-Encoding:gzip
    Content-Type:text/css
    Date:Tue, 16 Oct 2012 06:37:53 GMT
    Last-Modified:Tue, 16 Oct 2012 03:13:38 GMT
    Status:200 OK
    transfer-encoding:chunked
    Vary:Accept-Encoding
    X-Rack-Cache:miss

and then I refresh the page and get

    Cache-Control:private
    Connection:keep-alive
    Date:Tue, 16 Oct 2012 06:20:49 GMT
    Status:304 Not Modified
    X-Rack-Cache:miss

so it seems like caching is working. If that works for caching then what is the point of ***Expires*** and **Cache-Control:max-age**. To add to confusion, when I test the page at [https://developers.google.com/speed/pagespeed/insights/][2] it tells me to &quot;Leverage browser caching&quot;.


  [1]: http://chesseng.herokuapp.com
  [2]: https://developers.google.com/speed/pagespeed/insights

What is Cache-Control: private?

I have a php site running in cloud server.When ever i add new files css, js or images the browser is loading the same old js, css and image files stored in cache.

My site has a doctype and meta tag as below



    &lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;&gt;
    
      &lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=iso-8859-1&quot;&gt;
      &lt;meta http-equiv=&quot;Page-Enter&quot; content=&quot;blendTrans(Duration=1.0)&quot;&gt;
      &lt;meta http-equiv=&quot;Page-Exit&quot; content=&quot;blendTrans(Duration=1.0)&quot;&gt;
      &lt;meta http-equiv=&quot;Site-Enter&quot; content=&quot;blendTrans(Duration=1.0)&quot;&gt;
      &lt;meta http-equiv=&quot;Site-Exit&quot; content=&quot;blendTrans(Duration=1.0)&quot;&gt;




Because of the above doctype and meta code am i loading the same files cached in browser instead of new one






How to prevent Browser cache for php site

I have been looking at a HTML 5 boilerplate template (from [http://html5boilerplate.com/][1]) and noticed the use of `&quot;?v=1&quot;` in URLs when referring to CSS and JavaScript files.

 1. What does appending `&quot;?v=1&quot;` to CSS and JavaScript URLs in link and script tags do?
 2. Not all JavaScript URLs have the `&quot;?v=1&quot;` (example from the sample below: `js/modernizr-1.5.min.js`). Is there a reason why this is the case?

Sample from their `index.html`:

&lt;!-- language: html --&gt;

    &lt;!-- CSS : implied media=&quot;all&quot; --&gt;
    &lt;link rel=&quot;stylesheet&quot; href=&quot;css/style.css?v=1&quot;&gt;
    
    &lt;!-- For the less-enabled mobile browsers like Opera Mini --&gt;
    &lt;link rel=&quot;stylesheet&quot; media=&quot;handheld&quot; href=&quot;css/handheld.css?v=1&quot;&gt;
    
    &lt;!-- All JavaScript at the bottom, except for Modernizr which enables HTML5 elements &amp; feature detects --&gt;
    &lt;script src=&quot;js/modernizr-1.5.min.js&quot;&gt;&lt;/script&gt;

    &lt;!------ Some lines removed ------&gt;

    &lt;script src=&quot;js/plugins.js?v=1&quot;&gt;&lt;/script&gt;
    &lt;script src=&quot;js/script.js?v=1&quot;&gt;&lt;/script&gt;

    &lt;!--[if lt IE 7 ]&gt;
      &lt;script src=&quot;js/dd_belatedpng.js?v=1&quot;&gt;&lt;/script&gt;
    &lt;![endif]--&gt;
  
  
    &lt;!-- yui profiler and profileviewer - remove for production --&gt;
    &lt;script src=&quot;js/profiling/yahoo-profiling.min.js?v=1&quot;&gt;&lt;/script&gt;
    &lt;script src=&quot;js/profiling/config.js?v=1&quot;&gt;&lt;/script&gt;
    &lt;!-- end profiling code --&gt;


  [1]: http://html5boilerplate.com/

What does appending &quot;?v=1&quot; to CSS and JavaScript URLs in link and script tags do?

I need to somehow detect that the user has pressed a browsers back button and reload the page with refresh (reloading the content and CSS) using jquery.

How to detect such action via jquery?

Because right now some elements are not reloaded if I use the back button in a browser. But if I use links in the website everything is refreshed and showed correctly.

**IMPORTANT!**

Some people have probably misunderstood what I want. I don&#39;t want to refresh the current page. I want to refresh the page that is loaded after I press the back button. here is what I mean in a more detailed way:

1. user is visiting page1.
2. while on page1 - he clicks on a link to page2.
3. he is redirected to the page2
4. **now (Important part!) he clicks on the back button in browser because he wants to go back to page1**
5. he is back on the page1 - and now the page1 is being reloaded and something is alerted like &quot;You are back!&quot;

How to force reloading a page when using browser back button?

## Background ##

I am writing and using a very simple CGI-based (Perl) content management tool for two pro-bono websites. It provides the website administrator with HTML forms for events where they fill the fields (date, place, title, description, links, etc.) and save it. On that form I allow the administrator to upload an image related to the event. On the HTML page displaying the form, I am also showing a preview of the picture uploaded (HTML img tag).

## The Problem ##

The problem happens when the administrator wants to change the picture. He would just have to hit the &quot;browse&quot; button, pick a new picture and press ok. And this works fine.

Once the image is uploaded, my back-end CGI handles the upload and reloads the form properly.

The problem is that the image shown **does not** get refreshed. The old image is still shown, even though the database holds the right image. I have narrowed it down to the fact that the IMAGE IS CACHED in the web browser. If the administrator hits the RELOAD button in Firefox/Explorer/Safari, everything gets refreshed fine and the new image just appears.

## My Solution - Not Working ##

I am trying to control the cache by writing a HTTP Expires instruction with a date very far in the past.

    Expires: Mon, 15 Sep 2003 1:00:00 GMT

Remember that I am on the administrative side and I don&#39;t really care if the pages takes a little longer to load because they are always expired.

But, this does not work either.

## Notes ##

When uploading an image, its filename is not kept in the database. It is renamed as **Image.jpg** (to simply things out when using it). When replacing the existing image with a new one, the name doesn&#39;t change either. Just the content of the image file changes.

The webserver is provided by the hosting service/ISP. It uses Apache.

## Question ##
Is there a way to force the web browser to NOT cache things from this page, not even images?

I am juggling with the option to actually &quot;save the filename&quot; with the database. This way, if the image is changed, the src of the IMG tag will also change. However, this requires a lot of changes throughout the site and I rather not do it if I have a better solution. Also, this will still not work if the new image uploaded has the same name (say the image is photoshopped a bit and re-uploaded).


How to force a web browser NOT to cache images

We&#39;re currently working on a new project with regular updates that&#39;s being used daily by one of our clients. This project is being developed using angular 2 and we&#39;re facing cache issues, that is our clients are not seeing the latest changes on their machines.

Mainly the html/css files for the js files seem to get updated properly without giving much trouble.

How to prevent Browser cache on Angular 2 site?

Most browsers cache form input values. So when the user refreshes a page, the inputs have the same values.

Here&#39;s my problem. When a user clicks *Save*, the server validates POSTed data (e.g. checked products), and if not valid, sends it back to the browser. However, as stated above, even if the server clears selection for some values, they may still be selected because of the browser cache!

My data has invisible (until parent item selected) checkboxes, so the user may be even not aware that some previous value is still selected, until clicking *Save* again and gets an error message - even though the user thinks it&#39;s not. Which is irritating.

This can be resolved by doing &lt;kbd&gt;Ctrl&lt;/kbd&gt; + &lt;kbd&gt;F5&lt;/kbd&gt;, but it&#39;s not even a solution. Is there an automatic/programmatic way to tell browser not to cache form input data on some form/page?






Make page to tell browser not to cache/preserve input values

My friends and I are working on a website where we would like to cache certain images in order to display them faster in the future.  I have two main questions:

 1. How do you cache an image?
 2. How do you use an image once it has been cached? (and just to verify, if an image is cached on page A, it is possible to call it from the cache to use it on page B, right?)

Also, is it possible to set *when* the cached version of the image will expire?

It would be much appreciated if an example and/or a link to a page which describes this further was included.

We&#39;re fine using either raw Javascript or the jQuery version.

How do you cache an image in Javascript

I am using `getJSON` to fetch the results from server side but facing browser cache problems. I want the cache to be false. I tried using this just before my `getJSON` call.


     $.ajaxSetup({
                    cache: false
                })


But I am not getting the expected results. It still shows the old results.

I also identified some other solutions such as using `.ajax` but I really don&#39;t want to use that.

How to set cache false for getJSON in jQuery?

My problem is: sometimes browser over-cached some resources even if i&#39;ve already modified them. But After F5, everything is fine.

I studied this case whole afternoon. Now i completely understood the point of &quot;Last-Modified&quot; or &quot;Cache-Control&quot;. And i know how to solve my **issue** (just .js?version or explicit max-age=xxxx). But the **problem** is still unsolved: how does browser handle the response header **without** &quot;Cache-Control&quot; like this:

    Content-Length: 49675
    Content-Type: text/html
    Last-Modified: Thu, 27 Dec 2012 03:03:50 GMT
    Accept-Ranges: bytes
    Etag: &quot;0af7fcbdee3cd1:972&quot;
    Server: Microsoft-IIS/6.0
    X-Powered-By: ASP.NET
    Date: Thu, 24 Jan 2013 07:46:16 GMT 

They clearly cache them when &quot;Enter in the bar&quot;

![enter image description here][1]

 


  [1]: http://i.stack.imgur.com/3hJnn.jpg

What&#39;s default value of cache-control?

I read that using a service worker for offline caching is similar to browser caching. If so, then why would you prefer a service worker for this caching? Browser caching will check if the file is modified or not and then serve from the cache, and with a service worker we are handling the same thing from our code. By default, the browser has that feature so why prefer a service worker?

Why use a service worker for caching when browser cache handles the caching?

I&#39;m using localhost for development; and I&#39;m directly including jquery from CDN.

It seems that pressing the &quot;Ctrl + R&quot; would force the page to reload, including re-downloading the jquery from CDN.

I want to ask if it&#39;s possible that.. when I refresh, I keep the cache of the jquery from CDN, but clear the cache of my localhost?

NOTE: I know that one thing I can do is to host jquery file locally; I&#39;m just asking to see if there&#39;s a way to bypass that.

Chrome - Disable cache for localhost only?

I have a problem where users are reporting that their images aren&#39;t being uploaded and the old ones are still there. On closer inspection the new images are there, they just have the same name as the old one. What I do on the upload is that I rename the images for SEO purposes. When they delete an image the old index becomes available and is reused. Therefore it has the same image name. 

Is there a way to (i thought maybe there might be a meta tag for this) to tell the browser to not use its cahce?

The better answer is to rename the image to something totally new. I will get working on that but in the mean time is the quick solution while I work on the bigger problem.

Is there a way to force browsers to refresh/download images?

I am creating a website, but when I made changes to the stylesheet on my site, and I refreshed the site, none of the changes were there.

I tried to use the view source tool to check the `stylesheet.css` and it isn’t updated either. But when I go to the root of my system it is.

I have to wait at least 20 minutes before I see the update on my site, can anyone tell me why I don’t see changes right away? Is something wrong with my browser, computer, or server?

I also tried deleting my cookies, cache, and history but it still didn’t work.

Stylesheet not updating when I refresh my site

What to do here? I have a huge list of files that Google Speed Page said to &quot;Leverage Browser Caching&quot;.. but I don&#39;t know how? Do I mess or change the Apache config file (below) or do I put something in my .htaccess page?

     &lt;IfModule mod_proxy.c&gt;
        	ProxyRequests Off
        	CacheRoot &quot;/var/run/proxy&quot;
        	CacheSize 1024
        	CacheGcInterval 24
        #CacheMaxExpire 24
        #CacheLastModifiedFactor 0.1
        #CacheDefaultExpire 1
        #NoCache a_domain.com another_domain.edu joes.garage_sale.com
        	&lt;Directory &quot;disabled_proxy&quot;&gt;
        		Allow from example.com
        		Deny from all
        		Order Deny,Allow
        	&lt;/Directory&gt;
        &lt;/IfModule&gt;
        ##
        #### mod_expires is configured so that all static files but images
        #### expire after 60 seconds. Any response that has a life span of more
        #### than 5 seconds (see webperfcache.conf) will be cached by webperfcache.
        #### Make sure your CGIs return a &quot;Cache-Control: no-cache&quot; header if you
        #### elect to make your dynamically generated HTML pages not cache-able.
        #### If all your HTML pages are static you may also increase ExpiresDefault.
        
        &lt;IfModule mod_expires.c&gt;
        	ExpiresActive On
        	ExpiresDefault A60
        	ExpiresByType image/bmp A3600
        	ExpiresByType image/gif A3600
        	ExpiresByType image/ief A3600
        	ExpiresByType image/jpeg A3600
        	ExpiresByType image/png A3600
        	ExpiresByType image/tiff A3600
        	ExpiresByType image/x-cmu-raster A3600
        	ExpiresByType image/x-portable-anymap A3600
        	ExpiresByType image/x-portable-bitmap A3600
        	ExpiresByType image/x-portable-graymap A3600
        	ExpiresByType image/x-portable-pixmap A3600
        	ExpiresByType image/x-rgb  A3600
        	ExpiresByType image/x-xbitmap A3600
        	ExpiresByType image/x-xpixmap A3600
        	ExpiresByType image/x-xwindowdump A3600
        	ExpiresByType audio/basic A3600
        	ExpiresByType audio/midi A3600
        	ExpiresByType audio/mpeg A3600
        	ExpiresByType audio/x-aiff A3600
        	ExpiresByType audio/x-pn-realaudio A3600
        	ExpiresByType audio/x-pn-realaudio-plugin A3600
        	ExpiresByType audio/x-realaudio A3600
        	ExpiresByType audio/x-wav A3600
        	ExpiresByType video/mpeg A3600
        	ExpiresByType video/quicktime A3600
        	ExpiresByType video/x-msvideo A3600
        	ExpiresByType video/x-sgi-movie A3600
        &lt;/IfModule&gt;

Leverage browser caching, how on apache or .htaccess?

I&#39;m trying to do a `hard reload and empty cache` in Chrome because a previously loaded site keeps coming up on the `localhost` port I&#39;m using. Problem is the the right-click options seems to have stopped working, ie. nothing happens when I right-click on the refresh button and I can only left-click and reload the page normally. I had the option before so I know it&#39;s not the Chrome version I am using. It&#39;s pretty annoying. Anyone know what&#39;s happening here? Thanks in advance!

Chrome refresh right-click reload options not available

I was too quick about visiting a site I set up on a customer server, and Firefox now remembers, that the default site for (example) 

    testsite.mycompanyname.com (non existing subdomain, same as *.mycompanyname.com)

is 

    www.mycompanyname.dk - or rather the IP of the default server

I have then later set up the public DNS (a-record) to redirect to another server, but Firefox remembers the default IP adress.

Chrome/IE/Safari - no problem, as they have not visited that site before DNS kicked in...

I have set these in about:config:

    network.dns.disablePrefetch = true
    network.dnsCacheExpiration = 0

Anything else?

I really need firebug to debug the frontend on that site....

Cheers


Firefox invalidate dns cache

I have a VueJS app. Whenever I run `npm run build` it creates a new set of `dist/*` files, however, when I load them on the server (after deleting the old build), and open the page in browser, it loads the old build (from cache i assume). When I refresh the page, it loads the new code no problem.

This is my index.html:

    &lt;!DOCTYPE html&gt;
    &lt;html lang=&quot;en&quot;&gt;
    	&lt;head&gt;
    		&lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html;charset=UTF-8&quot;/&gt;
    		&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1, maximum-scale=1&quot;/&gt;
    		&lt;meta http-equiv=&quot;cache-control&quot; content=&quot;max-age=0&quot; /&gt;
    		&lt;meta http-equiv=&quot;cache-control&quot; content=&quot;no-cache&quot; /&gt;
    		&lt;meta http-equiv=&quot;expires&quot; content=&quot;-1&quot; /&gt;
    		&lt;meta http-equiv=&quot;expires&quot; content=&quot;Tue, 01 Jan 1980 1:00:00 GMT&quot; /&gt;
    		&lt;meta http-equiv=&quot;pragma&quot; content=&quot;no-cache&quot; /&gt;
    		&lt;link rel=&quot;stylesheet&quot; href=&quot;/static/css/bootstrap.min.css&quot;/&gt;
    	&lt;/head&gt;
    	&lt;body&gt;
    		&lt;div id=&quot;app&quot;&gt;&lt;/div&gt;
    	&lt;/body&gt;
    &lt;/html&gt;

Is there a way to force it to load new code every time or (ideally) to check if the old files are gone from the server, then refresh the browser?

VueJS/browser caching production builds

I have a `textbox` in a form field that gets populated by the user.  However currently (in Firefox 10) the user can navigate away from the page, then come back, and the input will be populated with its previous value.  I think this creates for a confusing user experience, and would like to prevent it.

Is there a way to do this without manually resetting the value?  I have tried changing the response to not cache as well as setting `autocomplete=&#39;false&#39;` with no luck.

How to prevent browser from caching form fields?

How long are files usually kept in a browser&#39;s cache? I&#39;m wondering about the general population - how long would I need to wait to be reasonable certain that most people&#39;s caches will refetch the file? 

How long are files usually kept in a browser&#39;s cache

I knew that chrome supports `from memory cache` and `from disk cache` when I request resources. However, I didn&#39;t see `from memory cache` before. 

How does chrome determine which resources should be cached in memory?

[![enter image description here][1]][1]


  [1]: https://i.stack.imgur.com/G53Uc.png

How chrome browser determine memory cache and disk cache?

ES6 modules allows us to create a single point of entry like so:

&lt;!-- begin snippet: js hide: false console: true babel: false --&gt;

&lt;!-- language: lang-js --&gt;

    // main.js

    import foo from &#39;foo&#39;;

    foo()

&lt;!-- language: lang-html --&gt;

    &lt;script src=&quot;scripts/main.js&quot; type=&quot;module&quot;&gt;&lt;/script&gt;

&lt;!-- end snippet --&gt;


**foo.js** will be stored in the browser cache. This is desirable until I push a new version of **foo.js** to production. 

It is common practice to add a query string param with a unique id to force the browser to fetch a new version of a js file (**foo.js?cb=1234**)

How can this be achieved using the es6 module pattern?

All Browser Cache Solutions on Gang of Coders

Total of 30 Browser Cache Solutions