小程序数据缓存

以你之姓@ 2022-09-12 01:45 137阅读 0赞

1.  设置存储对象  
    wx.setStorageSync(string key, any data)  
    eg: wx.setStorageSync(‘key’, \{time:存储时间,data:存储数据\})

> string key            本地缓存中指定的 key  
> any data              需要存储的内容。  
> 只支持原生类型、Date、及能够通过JSON.stringify序列化的对象。

1.  获取本地存储的对象  
    any wx.getStorageSync(string key)  
    eg: var value = wx.getStorageSync(‘key’)

> string key              本地缓存中指定的 key  
> 返回值 any data    key对应的内容

//设置缓存对象
     wx.setStorageSync('key', { time:Data.now(),data:"点赞吗？"})
     //获取本地缓存的对象
     var value = wx.getStorageSync('key')
    
    /* value.time:Data.now() value.data:"点赞吗？" */

1.  案例

Page({ 
      //全局变量，接受返回的数据
      cates: [],
      /** * 生命周期函数--监听页面加载 */
      onLoad: function (options) { 
        // 1、进入该页面首先进行查询是否有本地缓存
        const cate = wx.getStorageSync("cates");
        // 2、判断是否为空
        if (!cate) { 
          // 重新发起请求
          this.getCategory();
        } else { 
          // 使用缓存数据
          // 定义过期时间（用于更新缓存）
          if (Date.now() - cate.time > 1000 * 1000)
            // 重新发起请求
            this.getCategory();
          else { 
            // 使用缓存数据
            this.cates = cate.data;
            this.setData({ 
              left_navigator: this.cates.map((v) => v.cat_name),
              right_content: this.cates[0].children,
            });
          }
        }
      },
      // 获得商品分类信息
      getCategory() { 
        wx.request({ 
          url: "https://api-hmugo-web.itheima.net/api/public/v1/categories",
          success: (result) => { 
            this.cates = result.data.message;
            //缓存对象
            wx.setStorageSync("cates", {  time: Date.now(), data: this.cates });
            this.setData({ 
              left_navigator: this.cates.map((v) => v.cat_name),
              right_content: this.cates[0].children,
            });
          },
        });
      },
    });

**第一次编译**  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5Zyo5LiL5piv5bCP55m9_size_20_color_FFFFFF_t_70_g_se_x_16]  
**第二次编译，使用缓存数据**  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5Zyo5LiL5piv5bCP55m9_size_20_color_FFFFFF_t_70_g_se_x_16 1]

1.  更多使用  
    [https://developers.weixin.qq.com/miniprogram/dev/api/storage/wx.setStorageSync.html][https_developers.weixin.qq.com_miniprogram_dev_api_storage_wx.setStorageSync.html]

[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5Zyo5LiL5piv5bCP55m9_size_20_color_FFFFFF_t_70_g_se_x_16]: /images/20220828/1f35bb7e98f34d7b86612ca08bfd2020.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5Zyo5LiL5piv5bCP55m9_size_20_color_FFFFFF_t_70_g_se_x_16 1]: /images/20220828/e9b4544171dc4d3e99c60598deaa7db0.png
[https_developers.weixin.qq.com_miniprogram_dev_api_storage_wx.setStorageSync.html]: https://developers.weixin.qq.com/miniprogram/dev/api/storage/wx.setStorageSync.html