CODEWITHSUNDEEP
angular
mr felix
mr felix

Reputation: 11

How to cache images in browser memory using angular to avoid repeated server hit?

In angular we have localStorage and sessionStorage but they are very much limited in terms of capacity. Is there any built in angular feature to use browser memory or any other memory which will allow me to store any amount of data in user machine so that I can decide which data should be pulled from server and which one should be from cache storage? I can see in chrome there is a cache storage but found no sample instruction in angular about how to utilize it. Any demo or tutorial will help me a lot

Upvotes: 1

Views: 2971

Answers (2)

mishh
mishh

Reputation: 123

Maybe my server headers could be changed in such a way that I don't have to fool with this. In my case, the following code caused a remote request (never from cache) each time this <img> element was rendered:

<img src="assets/images/my_image.svg" class="my-image">

I updated it to the following and now I only have one remote request for this file:

<img class="my-image">

.my-image {
  content: url('../../../../assets/images/my_image.svg');
}

I hope it helps someone

Upvotes: 0

David Fontes
David Fontes

Reputation: 1508

Some random IT boy in the comments is correct, the browser already does that for you, it has nothing to do with Angular (though, the web server can change that behavior through some HTTP headers). Check the docs for more information (https://developer.mozilla.org/en-US/docs/Web/HTTP/Caching)

Your response to him:

As image files are fetched through api request, browser will not stop the request.

API requests, are simple HTTP requests, so it will cache them accordingly. The browser won't stop the request. The first request it made, it will store the file (in your case, an image) on disk (cache) and on subsequent requests, the browser will check if a resource for a URL is already stored in the cache, if it is, it will use the file from the cache and not actually reach the internet.

Note: It will appear in the network tab of the dev tools, so you might think that it went to the internet, but there it should say the origin of the file, if it came from disk or the internet.

If you need more control over these situations, there are a couple of things that you can do.

You can use the IndexedDB as mentioned by David, you will then have good support, but more work to store the files, because this is a database, you have to use it as such.

Alternatively, if you don't need support for older browsers, you can use the new Cache API which was design exactly for this. There are some conditions though (it must be ran from HTTPS), though I believe that it will be the future for this use case. It works by mapping a URL to a response containing the resource you want to store (in your case, an image). In your case, you can use an HTTP Interceptor to check if the image is already in the cache, if so, respond with that previously stored response.

Upvotes: 1

Related Questions