Angular2 - Store Images in Browser cache as Key-value pair form

Question

I'm working in Angular2. In my app, I've to load excessive amount of images. But instead of loading those images for every reload, I want to put those images into browser cache but in key-value pair form.

I want something like following

<img src=getImageFromCache('image-key')/>

And when API returns image URL, then I want to put that image in browser cache like following

addImageToBrowserCache('image-key', 'image-url')

Any kind help, please?

Regards

Answer 1

For this you can use local storage of browser.

As:

localStorage['img-key'] = 'img-url';

or

localStorage.setItem('img-key','img-url')

Same for retrieving.

localStorage.getItem('img-key')