微信小程序Storage缓存

Storage

微信小程序歌曲列表页实现中实现了歌曲列表，因为歌曲列表中包含了歌曲信息，所以我们将歌曲列表数据保存在缓存中，这样在歌曲播放页就不需要重新请求数据，同时从播放页返回歌曲列表页也不需要重新请求数据。

只需在请求云函数成功后调用以下方法即可

全部代码如下：

// pages/musiclist/musiclist.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    musiclist: [],
    listInfo: {},
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function(options) {
    console.log(options)
    wx.showLoading({
      title: '加载中',
    })
    wx.cloud.callFunction({
      name: 'music',
      data: {
        playlistId: options.playlistId,
        $url: 'musiclist'
      }
    }).then((res) => {
      console.log(res)
      const pl = res.result.playlist
      this.setData({
        musiclist: pl.tracks,
        listInfo: {
          coverImgUrl: pl.coverImgUrl,
          name: pl.name,
        }
      })
      this._setMusiclist()
      wx.hideLoading()
    })
  },

  _setMusiclist() {
    wx.setStorageSync('musiclist', this.data.musiclist)
  },
})

重新编译后，进入歌曲列表页，打开开发工具Storage，查看缓存数据。

我们点击其他歌单，进入歌曲列表，缓存中的数据发生了变化，说明会覆盖掉原来该 key 对应的内容。