uniapp 电商app设置缓存存储时间插件使用步骤

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，则代表已经一天了，可以进行版本检测了，版本检测完成后，无论用户选择了更新还是取消更新，都要进行新一轮的存储缓存，然后循环。