2.微信小程序之数据缓存Storage

用小程序Api中的wx.getStorage , wx.setStorage实现一个收藏功能。通过读取本地数据缓存，判断当前文章是否已被收藏，是则图片高亮显示，否则反之。

布局

<image wx:if="{{!isCollected}}" bindtap='handleCollection' src='/images/icon/collection-anti.png'></image>
<image wx:if="{{isCollected}}" bindtap='handleCollection' src='/images/icon/collection.png'></image>

点击图片绑定的函数

handleCollection(){
    //点击的时候取反
    let isCollected = !this.data.isCollected;
    this.setData({
      isCollected
    })

    //提示用户
    let title = isCollected ? '收藏成功':'取消收藏';
    wx.showToast({
      title,
      icon:'success'
    })

    //取缓存中的数据
    wx.getStorage({
      key: 'isCollected',
      success:(res)=> {
        //将现在的数据加入缓存
        //let obj = {};不能每次将其清空
        let obj = res.data;
        let {index} = this.data;
        obj[index] = isCollected;
        wx.setStorage({
          key: 'isCollected',
          data: obj,
          success:()=>{
            console.log('缓存成功');
          }
        });
      },
    })
    
  }

当页面加载时

data: {
    detailObj: {},
    isCollected: false,
    index: null
  },



  onLoad: function (options) {
    let index = options.index;
    this.setData({
      detailObj: datas.list_data[index],
      index
    });

    //根据本地的缓存数据判断用户是否收藏当前的文章
    let detailStorage = wx.getStorageSync('isCollected');
    
    if(!detailStorage){
      wx.setStorageSync('isCollected', {})
    }
   
    //判断用户是否收藏过,有三个值:true,false 和 undefined。
    if(detailStorage[index]){
      this.setData({
        isCollected:true
      })
    }
  },

直接贴代码啦，加上一些注释。说一下wx.getStorage( ) 和 wx.getStorageSync( ) 的区别。前者是异步存储有回调函数，后者是同步没有回调