How to clear HTML data?

Question

We can clear the CSS style sheet cache by using the query selector like this:

<link rel="stylesheet" type="text/css" href="stylesheet.css?v=1.0" />

Whenever we change the style sheet and need the browsers to be cleared about our CSS style sheet, we could change the version number like 1.1, 1.2, etc.

Is there anything something like this for clearing HTML data?

---

I was having the HTML markup like this:

<img src="picturename.jpg" /><!--picture of a **man**--->

Later I need to change the picture but the same file name:

<img src="picturename.jpg" /><!--picture of a **woman**--->

I deleted the picture of man and uploaded picture of woman. But when I viewed in the browser it is showing the cached picture that is picture of a man even after very clean refresh (Ctrl+F5) and also clearing with the settings that the browsers have.

Update

---

I came to know every time clearing the cache is not good idea so I wanted to implement this by jquery with the following concept:

1. First set the image src from picturename.jpg to picturename.jpg?v=1
2. Store the number in local storage or in cookie. But I'm confusing to use cookie as if the user deletes the cookies then the stored variable would also be deleted thus storing it in local storage would be better idea.
3. Retrieve the local storage variable number and check if the global variable number is exceeded then only change the picture src number something like this:

---

var cnum = 1; // author will change this number when needed
$(document).ready(function(){
var ccnum; // store in local storage then increase the number if cnum is greater than ccnum
//now change the src as of image

I need to change the src of all of my gallery images $('#mygallery img') and actually I've hundreds of images which are to be changed after some time but needed the same file name.

How could I do?

Answer 1

You could append a string to the filename with a random number/timestamp, this will cause the browser to reload the image as it's a different URL, however the filename can be the same.

<img src="picturename.jpg?201401281148" />

Answer 2

You could set the cache control header, forcing the browser to get a fresh copy every time.

<META HTTP-EQUIV="CACHE-CONTROL" CONTENT="NO-CACHE">

That will make sure the html page is always up to date. If you want the images to stay upto date you should either set a no-cache value in the ht access, or use a query breaker

To control incremental changes:

<img src="pic.jpg?version=1">

Or for always fetching the latests

<img src="pic.jpg?version=[timestamp]">

However both of these require you to change code on individual pages. I recommend (if your logic allows it) to specify ht access rules for no caching

# your document html 
  ExpiresByType text/html                 "access plus 0 seconds"
# media: images, video, audio
  ExpiresByType image/gif                 "access plus 0 seconds"
  ExpiresByType image/png                 "access plus 0 seconds"
  ExpiresByType image/jpg                 "access plus 0 seconds"
  ExpiresByType image/jpeg                "access plus 0 seconds"

The above is quick and easy to implement and will stop your users browser caching HTML and images, but doesn't let you cache any images, which you might want (e.g. your logo might not change regularly. So for granular control you'll want to use a query breaker in the source url.