0

Edit : I don't know if it actually loads from cache, so I can't create the question named "prevent from loading cache".

Problem : Browsers sometimes save my code and keep loading only the code they saved(Maybe it saves in the cache). When this problem occurs, browser is like caching the old code and won't change anything. This is to say, It won't load any new code I updated.

Information: This occurs in HTML, CSS, Javascript on all browsers. I am using Apache in XAMPP as an appserv.

Deleting cache in all browsers won't fix this.

My first way to stop this is to delete the file, refresh browser and replace it. The second ways is changing the pathname.

After the fix, the problem will occur again at anytime :(, so I would like to know how to prevent this.

Edited: If possible, please explain for newbie because I am very young beginner.

Mes
  • 177
  • 4
  • 13
  • Related, or dupe: [Making sure a web page is not cached, across all browsers.](http://stackoverflow.com/questions/49547/making-sure-a-web-page-is-not-cached-across-all-browsers). – nicael Dec 25 '15 at 13:59
  • 2
    If the server claims there are no changes, the server is broken, or is configured to ignore/forcefully set caching. – Sami Kuhmonen Dec 25 '15 at 13:59

2 Answers2

1

Try adding a variable like current timestamp to each url in its query string.

Nizar Ahmed
  • 180
  • 9
  • using timestamp will surely resolve caching issue but it will everytime loads css and increase unnecessary network traffic. Just adding querysting version will load old css, js from cache while new files will be loaded automatically as querystring version changes – Alpesh Panchal Dec 25 '15 at 14:06
  • In production, sure you are right, but this problem some times happens while developing, which will have the same version number. So this can be done while developing only. – Nizar Ahmed Dec 25 '15 at 15:01
  • Okay. During development, if we are caching the content then they can be turned off. Caching can be easily removed by hitting ctrl + f5 keys at once. – Alpesh Panchal Dec 25 '15 at 15:52
0

Just use querystring e.g. http://www.domain.com/style.css?version=1 for first version.

Now you update the stylesheet and you would like to reflact changes to all users browser who have cached version of old stylesheet. for this just change version querystring value to 1.1 

e.g. http://www.domain.com/style.css?version=1.1

This works for javascript, css and all other files called in by your html page.

Also for all files like html, css, js, you can eTag header. More information can be found here.

http://www.w3.org/2005/MWI/BPWG/techs/CachingWithETag.html

Alpesh Panchal
  • 1,723
  • 12
  • 9