a way to manage browser local caches for small images.
just recommand to cache small images（default: 15k）, prefer webp formatted.
if you had practiced PWA, you must known that it intercept requests and store resources to cacheStorage to make our app so fast like native app nearly; in a progressive way, we can make full use of browser's storage capability, eg: localStorage、IndexDb; this time, let's store some small images to our browser storage, you will see how fast it's;
- Install
yarn add local-cache-small-image
// or
npm i local-cache-small-image-
Option
- maxSize: image's max size;
- maxNum: max number can be stored;
- expireTime: how long stored;
- keyPrefix: stored key prefix;
- useLRU: whether to use LRU algorithm;
-
API
- resolve: (id, src) => Promise
- resolveAll: [] => Promise
-
Example
import LocalImgResolver from 'local-cache-small-image';
const option = {
// maxSize: 15 * 1024,
// maxNum: 30,
// expireTime: 7 * 24 * 60 * 60 * 1000,
// keyPrefix: 'local_cached_img_key_'
// useLRU: false
};
const localImgResolver = new LocalImgResolver(option);
let img;
localImgResolver
.resolve('uniqId', 'your image src')
.then(({id, src, base64}) => {
img = base64 || src;
});when you use localImgResolver.resolve(id, src), it return a Promise, I try to find a cached base64, if success, resolve it, or, use this src to download the image's blob and then save it as base64, and resolve it;
there is a simple LRU algorithm supported for you if you have too many local imgs to manage;
- maybe IndexDB