# cache.js

**Repository Path**: holyhigh2/cache.js

## Basic Information

- **Project Name**: cache.js
- **Description**: 用于浏览器端的轻量级缓存接口，可为所有getter赋予缓存能力，能够显著改善远程数据的响应速度并大幅提升用户体验
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 2
- **Forks**: 0
- **Created**: 2022-09-12
- **Last Updated**: 2023-05-16

## Categories & Tags

**Categories**: Uncategorized

**Tags**: Cache, request, Http, https

## README

# Cache.js
用于浏览器端的轻量级缓存接口，可为所有getter赋予缓存能力，能够显著改善远程数据的响应速度并大幅提升用户体验
## 有什么用？
基于B/S结构的web应用有大量需要远程加载的数据，无论是PC或App或其他平台都会频繁的看到转圈/长条/骨架等各式各样的loading提示。
一旦这些效果反复出现时就会严重影响用户体验。 

Cache.js虽然为解决这些问题而设计，但与[cache-interface](https://w3c.github.io/ServiceWorker/#cache-interface)并不相同，它目前还在草案阶段并且具有仅对request/response、仅工作在HTTPS下等限制，而Cache.js可对**任何Data-Getter**赋能。

## 使用场景
1. 对MIS类纯web应用中的配置/字典信息、（低频变动的）组织机构、人员信息等进行持久化缓存，并增加 ***刷新缓存*** 功能实现主动数据更新
2. 基于App/桌面/TV的混合应用，可实现全数据缓存，并在网络检测后主动更新点击数据
3. 对任何request数据或基于(request/大量)数据进行计算后的数据进行缓存，以解决网络波动、长时计算带来的UI卡顿

## 基本特性
- 可使用高阶函数方式实现 **非侵入** 的缓存扩展
- 支持持久化开关，可自动检测持久化数据并反序列化到内存
- 可通过指定key进行缓存更新
- 可一次性删除所有缓存，实现强制刷新

> 持久化使用`localStorage`接口，这限制了可缓存数据总容量。可以点击这里[检测不同浏览器](https://arty.name/localstorage.html)的实际限制

## 安装

```
npm i @holyhigh/cache.js
```

## 用法
```js
/********** 接口文件 **********/
import {cacheable} from '@holyhigh/cache.js'
//1. 接口文件中定义的方法
function getAllUsers(){
    return new Promise((res,rej)=>{
        setTimeout(()=>res('ok'),1000)
    });
}
//2. 扩展缓存能力
let getUsersCache = cacheable(getAllUsers,{key:'all_users'})
//3. 导出接口
export {getUsersCache}
```

```js
/********** 业务文件 **********/
const users = await getUsersCache()
```

## API
```ts
import Cache,{cacheable} from '@holyhigh/cache.js'
//包装getter并返回包装后的异步函数
//key支持函数或字符串，使用函数可实现同一接口不同参数进行不同缓存；相同key对应的缓存数据会被覆盖;校验器用于检测是否对rs进行缓存，默认 !isNil
const cacheGetter = cacheable(getter:Function, key: ((params: any[]) => string|Promise<string>) | string, options?:{validator?:(rs: any) => boolean}): (...params: any[]) => Promise<any>

//开启持久化，默认false
Cache.persistence = true;
//设置全局缓存key前缀，默认'cache.js_'
Cache.keyPreffix = 'MyCache_'
//设置全局校验器，默认(rs) => !isNil(rs),
Cache.validator = isString

//更新指定key缓存数据
Cache.put(key: string, data: any)

//删除指定key缓存数据
Cache.del(key: string | RegExp)

//检测指定key缓存数据
Cache.has(key: string)

//获取指定key缓存数据
Cache.get(key: string)

//获取所有缓存数据map
Cache.getAll()

//删除所有缓存数据
Cache.delAll()

//cacheable别名
Cache.add
```

## demo
见test/index.spec.ts