uni-app封装缓存过期方法

K先生 2021-04-21 爱技术4222

缓存在我们的日常开发中还是非常常见的。同样的今天的话题是在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

上一篇： uni-app报错：reportJSException >>>> exception function:createInstanceContext, exception

下一篇： mysql外键怎么理解？读这一篇文章就够了

uni-app封装缓存过期方法

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

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

文章评论

欢迎您，K先生

评论列表