simple-Cache 让缓存指定时间范围内有效的插件

simple-Cache 封装一款可以让缓存指定时间范围内有效的插件,支持vue、nvue
simple-Cache 让缓存指定时间范围内有效的插件

第一步:下载插件

在这里插入图片描述

第二步:解压后导入HbuilderX中

在这里插入图片描述

第三步:如果导入到现有的项目中,则需要对以下文件分别进行操作

注意引用文件时,文件路径的问题

App.vue文件
// nvue挂载到app.vue 然后 getApp().globalData.simpleCache 调用 非常好
//**导入到App.vue文件中**
import simpleCache from "./library/Simple-Cache.js"
export default {
//**添加到globalData全局数据中,这样其他所有的页面都是可以直接调用的**
    globalData:{
        simpleCache:simpleCache
    },
    onLaunch: function() {
        console.log('App Launch')
    },
    onShow: function() {
        console.log('App Show')
    },
    onHide: function() {
        console.log('App Hide')
    }
}
main.js文件
// 挂载到main.js
import simpleCache from "@/library/Simple-Cache.js"
Vue.prototype.$simpleCache = simpleCache
// 通过  this.simpleCache 调用
home.vue文件

因为我是home.vue就是我的首页,所以我需要页面一加载的时候,就开始调用simpleCache这个插件

// nvue使用如下方法调用
 var simpleCache = getApp().globalData.simpleCache; // 返回的是object

 // 如果你是vue则使用如下方法调用
 var vue_simpleCache = this.$simpleCache
 /*simpleCache = {
     put...get...remove...clear
 }*/
 // 设置缓存 不设置时间
 simpleCache.put("user_info",{
     nick:'aaa',
     user_id:111
 });
 // 获取缓存
 console.log( simpleCache.get('user_info') )

 // 设置缓存 且设置时间
 simpleCache.put("banner","nihaoao",3600);
 console.log( simpleCache.get('banner') )

我的使用方法如下
在onLoad(){}函数中执行以下的操作:

//获取全局的simpleCache
var simpleCache = getApp().globalData.simpleCache;
//这个是测试挂载后的数据
console.log("挂载到App.vue",getApp().globalData.simpleCache);
//通过put方法存储缓存,后面的时间是以秒为单位的。
simpleCache.put(
"banner","111111",24*60
)
console.log( simpleCache.get('banner') )


//到期后,获取这个key对应的缓存结果为false
setTimeout(()=>{
	console.log( simpleCache.get('banner') ) //到期后,获取缓存值为false
},2000)

如果获取到的缓存结果为false,说明是到期了。

使用这个插件的原因

因为项目需要app在加载的时候,需要以天为单位进行判断,如果有新版本,则提示更新,更新后,再次进行以天为单位的检测。
我考虑的解决办法就是:
App.vue加载时进行判断是否有这个时间缓存,如果为false,则代表已经一天了,可以进行版本检测了,版本检测完成后,无论用户选择了更新还是取消更新,都要进行新一轮的存储缓存,然后循环。

Logo

前往低代码交流专区

更多推荐