一个高效,快捷,使用简单的前端数据本地缓存插件
随着前端页面越来越精细和业务的复杂度日益增加,数据量往往会以几何速度增长,当我们使用传统的localStorage和SessionStorage的时候,很容易会遇到存储容量已满的情况,这个时候我们或许可以依赖自己App给webview提供接口,使用App的特殊本地储存空间,但是解决不了在浏览器的限制,一般浏览器的localStorage和SessionStorage在4MB左右,不同浏览器的容量不一样。但是当我们要存储的数据过大或者同一个域名下多个页面都需要localStorage和SessionStorage的时候,很有可能就会出现储存空间已满的情况。所以HTML5为我们提供了indexDB的本地存储机制,有效的为我们解决了存储空间不足的问题。
well-cahce并不是一个操作indexDB的库,well-cache是一个本地存储中间件,为我们优先使用indexDB进行存储,如果遇到浏览器不支持indexDB的情况下,会降级使用localStorage,你也可以手动指定存储方式。
well-cache的使用非常简单,只有5个方式,初始化well-cache实例,save、get、has和remove。
每个well-cache都需要实例化:
import WellCache from 'WellCache';
const wcache = new WellCache(<option>);
属性 | 说明 | 类型 | 默认值 |
---|---|---|---|
prefix | 储存标识 | string | 'wc' |
mode | 手动指定存储方式('IDB' | 'ss' | 'ls') | string | 根据浏览器选择 |
为了确保返回统一,建议只使用字符串和对象的形式进行存储
save( key: string, data: string | object, callback?: Function )
saveSync( key: string, data: string | object )
- key - 索引字段
- data - 存储数据
- callback - 回调函数
// 异步
wcache.save('123', {id: 123, data: '1231'}, (result) => {
// todo
});
// 同步
const result = await wcache.saveSync('123', {id: 123, data: '1231'});
// 返回值
// {
// "name":"wc-123",
// "isOk":true | false
// }
获取对应key的数据
get( key: string, conditions?: object, callback?: Function )
getSync( key: string, conditions?: object)
- key - 索引字段
- conditions - 查询条件
- callback - 回调函数
使用conditions进行查询,实际上是将缓存结果查询出来后,循环对比结果与传入的conditions里的每一个值是否相等。
查询后需要判断isOK和data是否有值,如果查询成功,但是并没有找到对应数据,那么data为null
// 异步
wcache.get('123', {id: 123}, (result) => {
// todo
});
// 同步
const result = await wcache.getSync('123', {id: 123});
// 返回值
// {
// "isOk":true,
// "data":{"id":123,"data":"1231"}
// }
has( key: string, conditions?: object, callback?: Function )
hasSync( key: string, conditions?: object)
- key - 索引字段
- conditions - 查询条件
- callback - 回调函数
判断是否有数据
// 异步
wcache.has('123', {id: 123}, (result) => {
// todo
});
// 同步
const result = await wcache.has('123', {id: 123});
// 返回值
// true | false
remove( key: string, callback?: Function )
remove( key: string )
- key - 索引字段
- callback - 回调函数
删除缓存数据
// 异步
wcache.remove('123', (result) => {
// todo
});
// 同步
const result = await wcache.removeSync('123');
// 返回值
// {"isOk":true | false}