uniapp 电商app设置缓存存储时间插件使用步骤 迷南。 2021-07-25 14:43 653阅读 0赞 # simple-Cache 让缓存指定时间范围内有效的插件 # simple-Cache 封装一款可以让缓存指定时间范围内有效的插件,支持vue、nvue [simple-Cache 让缓存指定时间范围内有效的插件][simple-Cache] # 第一步:下载插件 # ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70] # 第二步:解压后导入HbuilderX中 # ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 1] # 第三步:如果导入到现有的项目中,则需要对以下文件分别进行操作 # **注意引用文件时,文件路径的问题** #### 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,则代表已经一天了,可以进行版本检测了,版本检测完成后,无论用户选择了更新还是取消更新,都要进行新一轮的存储缓存,然后循环。 [simple-Cache]: https://ext.dcloud.net.cn/plugin?id=1129#detail [watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70]: /images/20210725/af0e169cb38f4c4fb0930bea9d598b1c.png [watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 1]: /images/20210725/cdc76efed09947b09f6301d4666cd9dc.png
还没有评论,来说两句吧...