微信小程序API之数据缓存

微信小程序框架提供丰富的微信原生API，可以方便的调起微信提供的能力，如获取用户信息，本地存储，支付功能等。
本文主要说明数据缓存

每个微信小程序都可以有自己的本地缓存

在进行ajax请求时
可以通过
wx.setStorage（异步本地存储数据）、
wx.setStorageSync(同步本地存储数据)、
wx.getStorage（异步使用本地数据）、
wx.getStorageSync（同步使用本地数据）、
wx.clearStorage（异步清理本地数据缓存）
wx.clearStorageSync（同步清理本地数据缓存）
对本地缓存进行设置、获取和清理。同一个微信用户，同一个小程序 storage 上限为 10MB。

wx.setStorage(OBJECT)

将数据存储在本地缓存中指定的 key 中，会覆盖掉原来该 key 对应的内容，这是一个异步接口。

OBJECT参数说明：

参数	类型	必填	说明
key	String	是	本地缓存中的指定的 key
data	Object/String	是	需要存储的内容
success	Function	否	接口调用成功的回调函数
fail	Function	否	接口调用失败的回调函数
complete	Function	否	接口调用结束的回调函数（调用成功、失败都会执行）

示例代码：

wx.setStorage({
  key:"key",
  data:"value"
})

wx.setStorageSync(KEY,DATA)

将 data 存储在本地缓存中指定的 key 中，会覆盖掉原来该 key 对应的内容，这是一个同步接口。

参数说明：

参数	类型	必填	说明
key	String	是	本地缓存中的指定的 key
data	Object/String	是	需要存储的内容

示例代码

try {
    wx.setStorageSync('key', 'value')
} catch (e) {    
}

wx.getStorage(OBJECT)

从本地缓存中异步获取指定 key 对应的内容。

OBJECT参数说明：

参数	类型	必填	说明
key	String	是	本地缓存中的指定的 key
success	Function	是	接口调用的回调函数,res = {data: key对应的内容}
fail	Function	否	接口调用失败的回调函数
complete	Function	否	接口调用结束的回调函数（调用成功、失败都会执行）

success返回参数说明：

参数	类型	说明
data	String	key对应的内容

示例代码：

wx.getStorage({
  key: 'key',
  success: function(res) {
      console.log(res.data)
  } 
})

wx.getStorageSync(KEY)

从本地缓存中同步获取指定 key 对应的内容。

参数说明：

参数	类型	必填	说明
key	String	是	本地缓存中的指定的 key

代码示例&解析

wx.showNavigationBarLoading();导航条加载动画
wx.showLoading({ title: '玩命加载中', mask: true })界面加载动画，title加载动画的提示语，mask透明蒙层，防止触摸穿透
let data1 = wx.getStorageSync("hotMovie");把存储到本地的数据异步赋值给data1，方便后续使用

onLoad: function() { 
    wx.showNavigationBarLoading();
    wx.showLoading({
      title: '玩命加载中',
      mask: true
    })
    var that = this;
    let data1 = wx.getStorageSync("hotMovie");
    if(data1){//判断data1是否有数据，若有直接that.setData({ })定义
      wx.hideNavigationBarLoading();
      wx.hideLoading();
      // console.log(res);
      that.setData({
        imgUrls: data1.slice(0, 2),
        imgkey: data1.slice(0, 2),
        info: data1.slice(0, 2),
        file: data1.slice(0, 2)
      })
    }else{//若无
      wx.request({//进行ajax请求
        url: 'https://www.easy-mock.com/mock/5b28c8793f9f7c0b22426dce/example/hotmovie',
        success(res) {
          wx.setStorage({//将请求成功的数据异步存储到本地
            key: 'hotMovie',
            data: res.data.subjects
          })
        }
      });
    };
  }

使用if(){}else{}判断并且将数据存储到本地的优点，使小程序把请求到的数据存储到本地，然后进行判断，有数据则不再请求，无数据则请求一次，存储到本地即可，用户体验度更高，界面无需刷新即可获取数据，操作更流畅。