How to Remove Image from Browser Cache

Remove specific images from browser cache

There are a few issues here.

First and foremost, the browser cache on disk cannot be altered by JavaScript. The cache on disk will grow as the amount of images that have been loaded grows and there is no stopping that.

What you can control is the amount of memory the browser is allocating in the page. This comes down to how many references exist to your images. I am not sure if you are using the same design scheme as shown in your post, but basically you have shown an image in the global scope.

This needs to change. The lifetime of the variable holding the images needs to exist for a smaller amount of time. That way it can lose scope. Once it has lost scope it will be a candidate for garbage collection. However, if its scope remains, it will not be collected.

Garbage collection will iterate the set of execution contexts stored on the page recursively and examine whether or not their variable environments contain eligible candidates. Note that everything in the global scope is in the lexical environment, and as a result will never be garbage collected until the page unloads.

So you need to move the temporary array of cached or "active" images into a variable environment somewhere, and ensure that it loses scope once the elements are placed on the page or in a queue which also loses scope.

How to force a web browser NOT to cache images

Armin Ronacher has the correct idea. The problem is random strings can collide. I would use:

<img src="picture.jpg?1222259157.415" alt="Sample Image">

Where "1222259157.415" is the current time on the server.

Generate time by Javascript with performance.now() or by Python with time.time()

How to delete images cache in HTML (or JS)

The images listed there (Tools->Resources->Frames->Images) are the images that were required while loading the page.

There's no way of deleting these items unless you modify the page and remove them from the source

Clear all image in browser cache

You can use the Clear-Site-Data HTTP header.

The Clear-Site-Data header clears browsing data (cookies, storage, cache) associated with the requesting website. It allows web developers to have more control over the data stored locally by a browser for their origins.

It is still mark as experimental but should work in all modern browsers.
See Clear-Site-Data from the MDN documentation for more information.

You can set this header like this :

response.Headers.Add("Clear-Site-Data", "cache");

If you want to refresh the cache each time a new version is published, you can combine this with a cookie and use this code in your global.asax :

protected void Application_BeginRequest(object sender, EventArgs e)
{
    var request = ((HttpApplication)sender).Request;
    var response = ((HttpApplication)sender).Response;

    var versionCookie = request.Cookies["version"];

    if (versionCookie == null)
    {
        versionCookie = new HttpCookie("version");
        versionCookie.Expires = DateTime.Now.AddYears(5);
    }

    if (versionCookie.Value != currentVersion)
    {
        versionCookie.Value = currentVersion;
        response.SetCookie(versionCookie);
        response.Headers.Add("Clear-Site-Data", "cache");
    }
}

How to remove cache files or images in Codeigniter 3.1.9

Dear append update time with image url like given under

example.com/image/image.img.jpg?20-02-2021 00:01:03

When you upload image save update time then append it with image url

---

Related Topics