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

迷南。 2021-07-25 14:43 743阅读 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