How to Implement Caching in Angular | Caching API Response in Angular | Caching Techniques

[@iewebdevdes]

This video was really helpful

[@brogrammers]

Love it 💙 Thank you for watching 🤞

[@cherifbarry9107]

I would like to know if I have something like 5000 lines returne in an array. Is it possible to cache it these data??

[@brogrammers]

It should be fine. Storing high data in browser memory is not good though. Usually anything below 20mb is ideal to store in browser memory.

[@cherifbarry9107]

@@brogrammers thank you for your return

[@arpitmalaiya2825]

What about service worker, can we use that for caching api data

[@brogrammers]

Technically you can use service worker to add caching behaviour on API but SW is not indented primary for API caching, i mean it can do lot more than just caching like e.g. offline forms & client side load balancing. It is like overkilling caching purpose by using SW, & you mostly don't want to add a dedicated JS process thread running in your browser just to cache some data if you're application code is already capable of doing same without it.

[@TheZukkino]

As you have spoken about local and session storage, could you make a video to transform a simple Angular Application in a PWA?

[@brogrammers]

Thank you for suggesting. I will try it.

[@armaanhadiq3741]

What will be the age of cache data in first approach, like will i get the fresh response after some time or it will be cached there all the time.

[@brogrammers]

Thank you for great question 🙂 I was expecting this sooner or later. The way httpinterceptor store cache is it uses browser storage. But there are cache reset and refresh method available. Usually cache is refreshed with JWT token in practical way which is more secure (based on JWT token's life httpinterceptor decides to use cache or make new hit) . Long story short it uses browser storage (not session nor cookie)

[@brogrammers]

If you clear browser storage your cache is gone.

[@armaanhadiq3741]

greate @@brogrammers if we want the cache to be still there after reloading a page or switching between pages then we should use localstorage as a key value pair approach. Am i right ?

[@brogrammers]

You are right.

[@henry_sparks]

This is great but then how do you revalidate your cached data? Because after the first call and you set your cache then subsequent calls will get the cached data but how do you tell angular to revalidate that data?

[@brogrammers]

To revalidate data we can put expiry to a data. It can be achieved in http interceptor case easily. Or you add your own expiry check logic. This can be added with help of jwt token module if you want to write 100% safe & secure validity logic.

[@brogrammers]

There is something called 'If-Modfied-Since' header, we can set our expiry date on the HttpRequest.