微信小程序学习笔记之本地数据缓存功能详解

什么是本地数据缓存？

在微信小程序中，我们可以通过wx.setStorage()和wx.getStorage()等 API 来实现本地数据缓存功能。本地数据缓存是指将一些小程序需要用到的数据存储在小程序的本地内存中，以便于后续快速读取和使用。本地数据缓存不会被清除，除非用户主动在微信客户端中清除。

如何使用本地数据缓存？

存储数据

调用wx.setStorage()可以将数据存储在小程序的本地存储中，并且可以指定存储成功后的回调函数。

wx.setStorage({
  key: 'keyName',
  data: 'value',
  success: function(res) {
    console.log('存储成功');
  }
})

读取数据

调用wx.getStorage()可以从小程序的本地存储中读取数据，并且可以指定读取成功后的回调函数。

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

删除数据

调用wx.removeStorage()可以从小程序的本地存储中删除特定的数据，并且可以指定删除成功后的回调函数。

wx.removeStorage({
  key: 'keyName',
  success: function(res) {
    console.log('删除成功');
  }
})

清空数据

调用wx.clearStorage()可以清空小程序的本地存储中所有的数据，并且可以指定清空成功后的回调函数。

wx.clearStorage({
  success: function(res) {
    console.log('清空成功');
  }
})

实战示例

示例一：将用户信息存储到本地缓存中

在用户首次登录成功后，我们可以将用户信息存储在本地缓存中，以便于后续访问时可以快速读取到用户信息。示例代码如下：

wx.request({
  url: 'https://example.com/login',
  success: function(res) {
    // 登录成功，将用户信息存储在本地缓存中
    wx.setStorage({
      key: 'userInfo',
      data: res.data.userInfo,
      success: function() {
        console.log('用户信息存储成功');
      }
    })
  }
})

在后续页面中，我们可以通过如下代码读取用户信息：

wx.getStorage({
  key: 'userInfo',
  success: function(res) {
    console.log('用户信息', res.data);
  }
})

示例二：缓存用户查看过的商品信息

在用户查看商品详情页时，我们可以将用户查看过的商品信息缓存到本地缓存中，以便于用户下次进入小程序时可以快速查看历史浏览记录。示例代码如下：

// 点击商品详情页时，将商品信息存储在本地缓存中
wx.setStorage({
  key: 'historyGoods',
  data: goodsInfo,
  success: function() {
    console.log('商品信息存储成功');
  }
})

在历史记录页面中，我们可以通过如下代码读取用户已经查看过的历史商品信息：

wx.getStorage({
  key: 'historyGoods',
  success: function(res) {
    console.log('历史商品信息', res.data);
  }
})