https://github.com/famanoder/local-cache-small-image
a way to manage local caches for small images.
https://github.com/famanoder/local-cache-small-image
browser-storage cache-image lru
Last synced: 5 months ago
JSON representation
a way to manage local caches for small images.
- Host: GitHub
- URL: https://github.com/famanoder/local-cache-small-image
- Owner: famanoder
- Created: 2019-07-18T18:58:03.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2023-01-04T07:51:06.000Z (over 3 years ago)
- Last Synced: 2025-02-08T05:19:11.712Z (over 1 year ago)
- Topics: browser-storage, cache-image, lru
- Language: JavaScript
- Size: 224 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 7
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
### local-cache-small-image
> 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;
### Usage
* **Install**
```js
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**
```js
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;
### Plan
* maybe IndexDB