K先生个人博客

当前位置:首页 > 爱技术 > 正文

uni-app封装缓存过期方法

缓存在我们的日常开发中还是非常常见的。同样的今天的话题是在uni-app框架中怎么封装一个缓存方法,为什么还要自己封装缓存方法?虽然说uni-app是用缓存的api接口的,也就是uni.setStorage,但是呢,这个缓存api是没有设置过期缓存这一说的,也就是说,你如果没有主动清除的话,这个缓存就会一直在。。。这明显缺了那么一点意思,所以我们来自己封装一个带设置缓存过期时间的一个方法。

uni-app封装的缓存过期方法

export default function myCache(key, value, seconds = 3600 * 24) {
	let nowTime = Date.parse(new Date()) / 1000;
	if (key && value) {
		let expire = nowTime + Number(seconds);
		uni.setStorageSync(key,JSON.stringify(value) + '|' +expire)
		console.log('已经把' + key + '存入缓存,过期时间为' + expire)
	} else if (key && !value) {
		let val = uni.getStorageSync(key);
		if (val) {
			// 缓存存在,判断是否过期
			let temp = val.split('|')
			if (!temp[1] || temp[1] <= nowTime) {
				uni.removeStorageSync(key)
				console.log(key + '缓存已失效')
				return '';
			} else {
				return JSON.parse(temp[0]);
			}
		}
	}

}

上面代码没什么难点,原理就是将过期时间一块存到缓存中,然后取的时候会通过这个时间判断缓存是否过期。

怎么全局引入这个缓存方法

首先,我们先说一下上述方法所在的文件位置,是 util/myCache.js ,然后我们在main.js文件中引入这个封装的缓存js文件,再挂载到vue全局,最后我们在其他的页面中就能自由使用我们封装的缓存方法啦。

// main.js文件
import myCache from './util/myCache.js'
Vue.prototype.myCache = myCache

那我们要怎么使用呢?其实非常简单。

this.myCache('key','value',20) //存入缓存,最后一个参数是缓存过期时间
this.myCache('key') //只传key一个参数的情况下,就是读取缓存

好了,就这样了,下课。

作者K先生本文地址http://www.gold404.cn/info/122

版权声明:本文为原创文章,版权归 K先生个人博客 所有,欢迎分享本文,转载请保留出处,谢谢!

文章评论

* 必填
可选
可选

评论列表

    暂时还没有评论哦!